Chartjs-Smaller scale for volume dataset in Chart JS

by

1👍

✅

you need to give every dataset a yAxisID and then you should name your axis with that id like this:

Data:

var data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1,
    yAxisID: "something",
  },
  {
    label: 'My Second Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(182, 50, 192)',
    tension: 0.1,
    yAxisID: "volume",
  },
  ]
};

Scales:

scales: {
    volume: {
        axis: "y",  
        min: -80,
        max: 60,
        position: 'right',
    },
    something: {
        axis: "y",
        min: -20,
        max: 70,
        position: 'left',
    }
}

Also you shouldn’t have the list yAxes, that was how axes were defined in chartjs 2.x

Here is a fiddle to see this in use: JSFiddle

edit: If you want an invisible axis just set display to false as seen in the now updated Fiddle.

Leave a comment