[FEATURE] Disabled legend by datasets

Current Behavior

I’m looking for a feature, I did not found how is it possible to not display all legends of a datasets, i develop a code, when a user click on a certain legend of a dataset, the datasets item + 1 is hidden. but i don’t want the user to click on the datasets + 1. See next pictures.
image
I don’t want to display legend 1 , 2 , 3 it correspond to the 3 straigth lines on the chart.
Here’s the code to hide n+1 line

options: {
                        legend: {
                            onHover: function (e) {
                                e.target.style.cursor = 'pointer';
                            },
                            onClick: function (e, legendItem) {
                                var index = legendItem.datasetIndex;
                                var ci = this.chart;
                                var meta = ci.getDatasetMeta(index);

                                if (index != 1 && index != 3 && index != 5) {
                                    var meta1 = ci.getDatasetMeta(index + 1);
                                    meta1.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                                }
                                // See controller.isDatasetVisible comment
                                meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                                // We hid a dataset ... rerender the chart
                                ci.update();
                            }
                        },
}

Now I just don’t want to display legend item 1 – 3 -5

Possible Solution

Question :
Is this already possible and i did not find how to do it ?

If it’s not possible already, Is it possible to add an option on the datasets structure like “displayLegend : true/false” like that :

datasets: [{
                            label: 'Indicateur de régularité',
                            data: dataIndicRegu,
                            backgroundColor: window.chartColors.purple,
                            borderColor: window.chartColors.purple,
                            borderWidth: 2,
                            fill: false,
                            lineTension: 0,
                            displayLegend: true,
                        },
                        {
                            label: 'Régularité total',
                            data: dataGlobalRegu,
                            backgroundColor: window.chartColors.purple,
                            borderColor: window.chartColors.purple,
                            borderWidth: 2,
                            borderDash: [4,6],
                            pointRadius : 0,
                            fill: false,
                            lineTension: 0,
                            displayLegend:false
                        },

Thank you

Author: Fantashit

1 thought on “[FEATURE] Disabled legend by datasets

  1. Thanks for help , finally done, if that can help see code below

    legend: {
                               labels: {
                                   generateLabels: function (chart) {
                                       var goodDataset = chart.data.datasets.filter(function (dataset, index) {
                                           return index %% 2 != 0 ? [] : dataset;
                                       });
                                       return goodDataset.map(function (dataset, i) {
                                           if (i %% 2 == 0)
                                               return {
                                                   text: dataset.label,
                                                   fillStyle: dataset.backgroundColor,
                                                   hidden: !chart.isDatasetVisible(i),
                                                   lineCap: dataset.borderCapStyle,
                                                   lineDash: dataset.borderDash,
                                                   lineDashOffset: dataset.borderDashOffset,
                                                   lineJoin: dataset.borderJoinStyle,
                                                   lineWidth: dataset.borderWidth,
                                                   strokeStyle: dataset.borderColor,
                                                   pointStyle: dataset.pointStyle,
                                                   // Below is extra data used for toggling the datasets
                                                   datasetIndex: i
                                               };
                                           else
                                               return {
                                                   text: "",
                                                   datasetIndex: i,
                                                   fillStyle: "white",
                                                   strokeStyle: "white",
                                                   pointStyle: 'default',
                                               }
                                       }, this);
                                   },
                               },
                               onHover: function (e, chart) {
                                   if (chart.datasetIndex %% 2 == 0)
                                       e.target.style.cursor = 'pointer';
                               },
                               onClick: function (e, legendItem) {
                                   var index = legendItem.datasetIndex;
                                   var ci = this.chart;
                                   var meta = ci.getDatasetMeta(index);
                                   if (index == 0 || index == 2 || index == 4) {
                                       var meta1 = ci.getDatasetMeta(index + 1);
                                       meta1.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
    
                                       // See controller.isDatasetVisible comment
                                       meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                                       // We hid a dataset ... rerender the chart
                                       ci.update();
                                   }
                               }
                           },
    

    For this result :
    image

Comments are closed.