Center Positioning

This sample show how to place the axis in the center of the chart area, instead of at the edges.

Center Positioning - 图1

Default PositionsPosition: centerPosition: Vertical: x=-60, Horizontal: y=30

config setup actions

  1. const config = {
  2.   type: 'scatter',
  3.   data: data,
  4.   options: {
  5.     responsive: true,
  6.     plugins: {
  7.       title: {
  8.         display: true,
  9.         text: 'Axis Center Positioning'
  10.       }
  11.     },
  12.     scales: {
  13.       x: {
  14.         min: -100,
  15.         max: 100,
  16.       },
  17.       y: {
  18.         min: -100,
  19.         max: 100,
  20.       }
  21.     }
  22.   },
  23. };
  1. const DATA_COUNT = 6;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const data = {
  4.   datasets: [
  5.     {
  6.       label: 'Dataset 1',
  7.       data: Utils.points(NUMBER_CFG),
  8.       fill: false,
  9.       borderColor: Utils.CHART_COLORS.red,
  10.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  11.     },
  12.     {
  13.       label: 'Dataset 2',
  14.       data: Utils.points(NUMBER_CFG),
  15.       fill: false,
  16.       borderColor: Utils.CHART_COLORS.blue,
  17.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  18.     }
  19.   ]
  20. };
  1. const actions = [
  2.   {
  3.     name: 'Default Positions',
  4.     handler(chart) {
  5.       chart.options.scales.x.position = 'bottom';
  6.       chart.options.scales.y.position = 'left';
  7.       chart.update();
  8.     }
  9.   },
  10.   {
  11.     name: 'Position: center',
  12.     handler(chart) {
  13.       chart.options.scales.x.position = 'center';
  14.       chart.options.scales.y.position = 'center';
  15.       chart.update();
  16.     }
  17.   },
  18.   {
  19.     name: 'Position: Vertical: x=-60, Horizontal: y=30',
  20.     handler(chart) {
  21.       chart.options.scales.x.position = {y: 30};
  22.       chart.options.scales.y.position = {x: -60};
  23.       chart.update();
  24.     }
  25.   },
  26. ];

Docs