Chartjs-Center origin of a Scatter Chart

by

0👍

Set the min and max range of your axes so that they extend from negative to positive. This will put (0, 0) in the middle.

chart.js centered scatter axis

Example code below:

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Data One',
      borderColor: 'black',
      backgroundColor: 'black',
      data: [{
        x: 7,
        y: 27,
      }],
    }],
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          min: -30,
          max: 30,
        },
      }, ],
      yAxes: [{
        ticks: {
          min: -30,
          max: 30,
        },
      }],
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

0👍

You can use the Plugin Core API that offers a range of hooks that may be used for performing custom code. In the beforeDraw for example, you can compute and set the ticks.padding of both axes in order to move the ticks to the desired position.

beforeDraw: chart => {
  var xAxis = chart.scales['x-axis-1'];
  var yAxis = chart.scales['y-axis-1'];
  const scales = chart.chart.config.options.scales;
  scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
  scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
}

Please take a look at the runnable code below and see how it works.

new Chart('myChart', {
  type: 'scatter',
  plugins:[{
    beforeDraw: chart => {
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];
      const scales = chart.chart.config.options.scales;
      scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
      scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
    }
  }],
  data: {
    datasets: [{
      label: 'Data One',
      data: [{x:7,y:27}],
      backgroundColor: 'black'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          min: -30,
          max: 30,
          stepSize: 5,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        }        
      }],
      yAxes: [{
        ticks: {
          min: -30,
          max: 30,
          stepSize: 5,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        } 
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="1" height="1"></canvas>

Leave a comment