Chart,js stepSize working for right hand Y axis but not left hand Y axis

Question

I have a chart with two Y axes, one on the left and one on the right. Both have a set min, max, and stepSize so that they have exactly 11 tick marks. The right hand Y axis seems to honor everything as expected but the left hand axis wont honor the stepSize.

The left hand Y axis goes from 3800 to 4140, which means if I want exactly 11 tick marks I should step by 34 and I have that set but it actually starts at 3800, ticks once by 8, then continues on ticking by 34 until it reaches 4114, and finally ticks for 26 to reach 4140. How can I stop this?

user_2057925 · Answer

You could try to force to use your ticks implementing axis callback:

afterBuildTicks(axis, ticks) {
  axis.ticks = [];
  for (let i = axis.options.ticks.min; i<=axis.options.ticks.max; i+=axis.options.ticks.stepSize) {
    axis.ticks.push(i);
  }
}

var dates = ['07/29/2022', '08/01/2022', '08/02/2022', '08/03/2022', '08/04/2022', '08/05/2022', '08/06/2022', '08/07/2022', '08/08/2022', '08/09/2022', '08/10/2022', '08/11/2022'];
var portfolio_values = [3869.73, 3802.77, 3811.14, 3813.0, 3818.58, 3954.36, 3954.36, 3954.36, 3993.42, 3983.19, 4131.99, 4086.42];
var sp500_values = [378.79, 377.65, 375.21, 381.07, 380.77, 379.98, 379.98, 379.98, 379.64, 378.14, 386.06, 386.43];

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
          type: "line",
          data: {
            labels: dates,
            datasets: [{
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(0,0,255,1.0)",
                borderColor: "rgba(0,0,255,0.1)",
                yAxisID: "A",
                label: "Twitter",
                data: portfolio_values
              },
              {
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(255,0,0,1.0)",
                borderColor: "rgba(255,0,0,0.1)",
                yAxisID: "B",
                label: "S&P500",
                data: sp500_values
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: "Twitter vs S&P500"
            },
            legend: {
              display: true
            },
            scales: {
              yAxes: [{
                  id: "A",
                  type: "linear",
                  position: "left",
                  ticks: {
                    min: 3800,
                    max: 4140,
                    stepSize: 34
                  }, 
                  afterBuildTicks(axis, ticks) {
                    axis.ticks = [];
                    for (let i = axis.options.ticks.min; i<=axis.options.ticks.max; i+=axis.options.ticks.stepSize) {
                      axis.ticks.push(i);
                    }
                  }
                },
                {
                  id: "B",
                  type: "linear",
                  position: "right",
                  ticks: {
                    min: 370,
                    max: 390,
                    stepSize: 2,
                  }
                }
              ]
            }
          }
        });

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

Chart,js stepSize working for right hand Y axis but not left hand Y axis

1 Answers