How To Match Left and Right Tick Intervals with Chartjs

Question

When I use a left and right line plot in Chartjs, I sometimes get inconsistent Y Axis tick interval counts. So, I might have like 7 intervals on the left, and Chartjs automatically might put 10 on the right. An example of a hard-to-read chart would look like this:

Therefore, the question is -- how do I set the Y Axis tick interval on the right so that it is consistent with the left?

Answer 1

When defining the options.scales.yAxes[1] (the right Y axis), add a beforeUpdate callback so that you can tweak its stepSize , like so:

beforeUpdate: function(scale) {
  // get the max data point on the right
  var nMax = Math.max.apply(Math,scale.chart.config.data.datasets[1].data);
  // Get the count of ticks on the left that Chartjs automatically created.
  // (Change the 'Clicks' to the 'id' property of that left Y Axis.)
  var nLeftTickCount = scale.chart.scales['Clicks'].ticks.length;
  // Add some exception logic so that we don't go less than 7 (a failsafe).
  // Also, we need the count of spaces between the ticks, 
  // not the count of total ticks.
  nLeftTickCount = (nLeftTickCount < 7) ? 7 : nLeftTickCount - 1;
  // compute our tick step size
  var nStepSize = nMax / nLeftTickCount;
  // Assign the right Y Axis step size.
  scale.chart.options.scales.yAxes[1].ticks.stepSize = nStepSize;
  return;
}

This creates a consistent chart like so:

Here is the entire example of the area chart with a left and right Y Axis:

<script src="vendor/chartjs/chart.js/dist/Chart.min.js"></script>

<div class="chart-container">
  <canvas id="my-canvas" width="400" height="200" style="width:100%;"></canvas>
</div>

<script>

var tsCanvas = document.getElementById('my-canvas');

var tsChart = new Chart(tsCanvas, {
  type: 'line',
  data: {
    labels: ["Feb 1","Feb 16","Mar 1","Mar 16","Mar 22"],
    datasets: [
      {
        label: 'Clicks',
        yAxisID: 'Clicks',
        data: [10706, 12847, 11516, 10464, 1204],
        backgroundColor: 'rgba(26, 187, 156, 0.2)',
        borderColor: 'rgba(26, 187, 156, 1)',
        pointBackgroundColor: 'rgba(26, 187, 156, 1)',
        borderWidth: 0.5,
        pointRadius:2,
        tension:0
      },
      {
        label: 'Revenue',
        yAxisID: 'Revenue',
        data: [106.66, 342.86, 313.67, 461.18, 25.84],
        backgroundColor: 'rgba(90, 144, 197, 0.2)',
        borderColor: 'rgba(90, 144, 197, 1)',
        pointBackgroundColor: 'rgba(90, 144, 197, 1)',
        borderWidth: 0.5,
        pointRadius:2,
        tension:0
      }
    ]
  },
  options: {
    maintainAspectRatio:false,
    hover: {
      animationDuration:0
    },
    tooltips: {
      mode: 'index',
      multiKeyBackground: 'rgba(255,255,255,0.55)'
    },
    scales: {
      yAxes: [
      {
        id: 'Clicks',
        type: 'linear',
        position: 'left',
        scaleLabel: {
          display:true,
          labelString: 'Clicks'
        },
        ticks: {
          beginAtZero:true
        }
      },
      {
        beforeUpdate: function(scale) {
          var nMaxRev = Math.max.apply(Math,scale.chart.config.data.datasets[1].data);
          var nLeftTickCount = scale.chart.scales['Clicks'].ticks.length;
          nLeftTickCount = (nLeftTickCount < 7) ? 7 : nLeftTickCount - 1;
          var nTickInterval = nMaxRev / nLeftTickCount;
          scale.chart.options.scales.yAxes[1].ticks.stepSize = nTickInterval;
          return;
        },
        id: 'Revenue',
        type: 'linear',
        position: 'right',
        scaleLabel: {
          display:true,
          labelString: 'Revenue'
        },
        ticks: {
          beginAtZero:true
        }
      }
      ],
      xAxes: [
        {
          type: 'category',
          ticks: {
            minRotation:50,
            maxRotation:50
          }
        }
      ]
    }
  }
});

</script>