how to filter dataset from labels using ChartJS

Question

I have datasets from my chart and I want to reorganize to make it look better.

This would be my chart OriginalChart

and this would be my chart when I remove 2 elements labels from it and the idea would be to reorganize everything and delete the elements with the red boxes that have 0 as value or in other words, to only display data with values different than 0 ... ChartWithDataToOrganize

the idea would be simple, just filtering all data value that is equal to 0, but I don't really if there is a tool for it but also to reverse it as well when you display all data again. labels

I achieved to see how to hide elements when clicking on the legends but how can I achieve to hide the data inside which is == 0 and then get it reversed when I unhide it and see it like the first time..

legend: {
                            display: true,
                            onClick: function(e, legendItem) {
                            var index = legendItem.datasetIndex;
                            var actualChart = this.chart;
                            //If the actual label is not hidden, I set it up as false, otherwise is null
                            var alreadyHidden = (actualChart.getDatasetMeta(index).hidden === null) ? false : actualChart.getDatasetMeta(index).hidden;
                            actualChart.data.datasets.forEach(function(e, i) {
                                var meta = actualChart.getDatasetMeta(i);
                                if (i === index) {//I check if the selected label is already hidden otherwise I hide it
                                    if(!alreadyHidden){
                                        meta.hidden = true;
                                    }else{
                                        meta.hidden = null;
                                    }
                                }
                            });
                            actualChart.update();
                            },

                        },

I'm using ChartJs 2.8.0 on Chrome

I did not put any data entry as labels are just names and the others returnData() are just %

Done!, I was trying to put it on jsfiddle but it gives me an error :/ Thanks in advanced for your time @WhiteHat — Rafael Rueda, Dec 09 '19 at 21:35
Oh thanks a lot, It would be so helpfull as I was all day trying to solve this. — Rafael Rueda, Dec 09 '19 at 22:04

score 0 · Accepted Answer · answered Dec 11 '19 at 02:05

0

I managed to do it by creating a copy of the actual copy of my datasetsLabels and set up the new configuration and in case I show again the selected label I just replace the new dataSetLabel for the previous dataset that I had before.

answered Dec 11 '19 at 02:05

Rafael Rueda

21
6

this was the approach I came up with, maybe share that code here for others. I didn't come to the office yesterday, glad you were able to resolve... – WhiteHat Dec 11 '19 at 12:22

how to filter dataset from labels using ChartJS

1 Answers1