[Chartjs]-Horizontally align Chart.js y axes

by

2👍

You can set the width of the axis to be the same on both graphs

  scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          afterUpdate: function(scale) {
            scale.width = 100 // Set this value to be the same on both graphs
          },
        },
      ],
  }

0👍

You can simply set a max for the Y axes. E.g.

var maxY = 100;

....

scales: {
    yAxes: [{
        id: 'A',
        type: 'linear',
        ticks: {
            .....
            max: maxY
        },
    }]
    ....
}

here the snippet:

https://jsfiddle.net/Lx9unv47/

Also if you don’t want to set the max of the Y axes manually you can do this:

var allValues = data.datasets[0].data.concat(data2.datasets[0].data);
var maxY = Math.max(...allValues);

and here the fiddle: https://jsfiddle.net/r6jgLmns/

Leave a comment