Chartjs-How to toggle one of multiple y axis on chart.js

by

1👍

✅

This can be done the cleanest using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.

You could use the beforeLayout hook as shown below. The function iterates over the datasets and sets the yAxes.display option depending whether the corresponding dataset is hidden or not.

chartPlugins = [{
  beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !chart.getDatasetMeta(i).hidden)
}];

The plugins need to be defined on the canvas as follows:

<canvas baseChart 
  ...
  [plugins]="chartPlugins">
</canvas>

Please take a look at the following StackBlitz.

Leave a comment