Chart.js turn off all y axis and toggle them on / off

Question

What I have:

After canvas is rendered I would like to see nothing: no curves on canvas area and no y axis - it actually works

Initial view:

What I need: After click on label (Dataset1, etc.) I would like to see both curve and its corresponding y axis - however I see only curve.

repo: https://stackblitz.com/edit/angular-ng2-charts-toggle-axis-visibility-z7elmq

Answer 1

At a first glance, your code looks fine to me and I expected it to work just fine. After some debugging however, I found out that chart.getDatasetMeta(i).hidden is null when the dataset is hidden and false, when it is visible. Therefore, the beforeLayout callback function should be changed as follows to make it work.

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

Please take a look at your amended StackBlitz.