chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.36k stars 11.89k forks source link

is it possible to toggle legend items programatically? #3150

Closed cankut closed 8 years ago

cankut commented 8 years ago

Hi,

When i click on the legend items they are toggled in the chart. strikethrough items are not rendered.

image

How can i do the same thing by using chart instance, instead of clicking on legend items?

some code like;

chart.hideLabel('RGI');
chart.showLabel('RGI');
swinston100 commented 8 years ago

Following :-)

mennodekker commented 8 years ago

For me it worked to use this:

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=null;
chart.update();

Where 1 is the index of RGB in the dataset.

etimberg commented 8 years ago

@mennodekker has the correct answer

yucigou commented 7 years ago

@mennodekker is right. Just one point: instead of null, better to use false.

The reason is that if the dataset is hidden in the first place, programmatically setting hidden to null won't actually show the dataset.

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=false;
chart.update();
GeraudWilling commented 6 years ago

I'm actually facing a similar issue. I"ve make a custom legend component and I'm able to show/hide using the above codes. However, this only works for bar chart. It raise the following exception when using it with donut chart:

TypeError: Cannot read property '_meta' of undefined at Chart.getDatasetMeta (core.controller.js:656)

Have anyone faced a similar issue please?

jamsshhayd commented 5 years ago

Is there anyway to hide or show specific lines, and not the whole chart? @mennodekker 's way of doing this toggles the whole chart.

Prince890840 commented 1 year ago

I'm actually facing a similar issue. I"ve make a custom legend component and I'm able to show/hide using the above codes. However, this only works for bar chart. It raise the following exception when using it with donut chart:

TypeError: Cannot read property '_meta' of undefined at Chart.getDatasetMeta (core.controller.js:656)

Have anyone faced a similar issue please?

Yes I faced similar.