Chart.js: Allow animation to/from hidden datasets

Created on 25 Dec 2015  Â·  9Comments  Â·  Source: chartjs/Chart.js

Requested in the comments of #1146

enhancement

Most helpful comment

a workaround:

self.graph.datasets[0].hidden = true;
or
self.graph.datasets[0].hidden = true;

then

use the update() method on the chart to change the state..

also, to tie it to a checkbox (as i am doing currently):

self.graph.datasets[0].hidden = document.getElementById('seriesHide').checked; self.chart.update();
note, i am using knockout.js for my backend data binding, so you may find the self. unnecessary.

All 9 comments

Hi. Any progress on this one?

No progress has been made. I have a general idea of what needs to be done, but have not explored it

a workaround:

self.graph.datasets[0].hidden = true;
or
self.graph.datasets[0].hidden = true;

then

use the update() method on the chart to change the state..

also, to tie it to a checkbox (as i am doing currently):

self.graph.datasets[0].hidden = document.getElementById('seriesHide').checked; self.chart.update();
note, i am using knockout.js for my backend data binding, so you may find the self. unnecessary.

@WattsC-90 ...Hey ...would you please provide more details about how to use the checkbox to control hiding/display the data on the chart? I am working this task but feel confused how to pass the boolean value to the 'datasets[0].hidden' and update the chart?

@hexx870206helen I am assuming you are working for the Chart.js repository and therefore my answer would be:

I would probably have an option to enable series hiding on the chart globally, which enables checkboxes next to the key labels which have an event, on change or similar. When those checkboxes change state, the series gets hidden, probably by the onchange event handler simply doing what I mentioned above, changing the series to hidden and calling update.

Hopefully this helps, if not, I can explain a bit more? I am trying to describe the behaviour, as I don't want to comment on implementation given I am not involved in the repository source code.

@WattsC-90 hey...that's enough...appreciate your suggestions...thanks a lot

@hexx870206helen I have had a dig around and found my old codepen from when I was doing this work.. take a look here: http://codepen.io/chriswatts90/pen/PGovpO and it shows you how to link the checkbox in with the graph, its very rough code, but should get you started! there is no data though as it points to a json-server (nodejs) endpoint to get its data. But i figure you dont need the data, just showing how it links the bits together.

I see this feature is intended for v2.8. I look forward to its arrival :)

@simonbrunel @etimberg hi there! very interested in this feature - is this part of 2.7 or 2.8? where can I find the docs if so? cc @ChristianBell1995

Was this page helpful?
0 / 5 - 0 ratings

Related issues

akashrajkn picture akashrajkn  Â·  3Comments

longboy picture longboy  Â·  3Comments

SylarRuby picture SylarRuby  Â·  3Comments

nickgoodliff picture nickgoodliff  Â·  3Comments

HeinPauwelyn picture HeinPauwelyn  Â·  3Comments