CODEWITHSUNDEEP
angularchart.js
Ramesh
Ramesh

Reputation: 677

Chart JS - Disable lines and Uncheck legends by default

I am using Chart JS in Angular application and displaying 4 lines in LINE chart and displaying legends for each lines. Y-Axis 1 showing two lines and Y-Axis 2 showing two lines. I want to display only Y-Axis 1 lines by default when chart is loading. And I want to display Y-Axis 2 lines by click on uncheck legends. Please help me to do that?

Upvotes: 0

Views: 271

Answers (1)

uminder
uminder

Reputation: 26150

After creating the chart, you can retrieve its metadata through .getDatasetMeta(index), change the hidden attribute of the desired datasets, then update the chart.

const chart = new Chart(document.getElementById('myChart'), {
  ...
});

chart.getDatasetMeta(2).hidden = true;    
chart.getDatasetMeta(3).hidden = true;    
chart.update();

Upvotes: 1

Related Questions