score:-3

onlegendclick: function (e) {
var series = e.target;
                series.isvisible() ? series.hide() : series.show();
            },

dxcharts have a function called onlegendclick, a few others are onseriesclick and onpointclick. i hope this helps.

score:0

i've found no way to do this. it's easy to put some onclick behaviour on the legend template, and you can easily change the series stroke and colors alpha channel to 0 so that the area and stroke disappear but i've found no way to do this on points.

i've decided to use google charts for this particular chart, and chart.js whenever i do not need that behavior, hoping that the good creators of chart.js will add it in the future.

score:1

an update to @benallansmith answer, the link to the documentation is now :

https://www.chartjs.org/docs/latest/configuration/legend.html

my version of the example code, to have datasets 2 and 3 hidden while clicking on legend for dataset 1 (datasets 2 and 3 have their legends hidden with the filter function):

public static readonly mychart: chart.chartconfiguration = {
    type: 'line',
    data: {
        datasets: [
            {
                label: 'a',
                bordercolor: 'red',
                fill: false,
                linetension: 0
            },
            {
                label: 'b',
                bordercolor: 'blue',
                fill: false,
                linetension: 0,
                pointradius: 0
            },
            {
                bordercolor: 'blue',
                borderdash: [5, 10],
                borderwidth: 1,
                fill: false,
                linetension: 0,
                pointradius: 0
            },
            {
                bordercolor: 'blue',
                borderdash: [5, 10],
                borderwidth: 1,
                fill: false,
                linetension: 0,
                pointradius: 0
            }
       ]
   },
   options: {
       legend: {
           labels: {
               filter: function(legenditem, chartdata) {
                    if (legenditem.datasetindex > 1) {
                        return false;
                    }
                    return true;
                }
            },
            onclick: function(e, legenditem) {
                const index = legenditem.datasetindex;
                if (index === 1) {
                    const ci = this.chart;
                    [
                        ci.getdatasetmeta(1),
                        ci.getdatasetmeta(2),
                        ci.getdatasetmeta(3)
                    ].foreach(function(meta) {
                        meta.hidden = meta.hidden === null ? !ci.data.datasets[1].hidden : null;
                    });
                    ci.update();
                } else {
                    // do the original logic
                    chart.defaults.global.legend.onclick.call(this, e, legenditem);
                }
            }
        },
        responsive: false,
        animation: {
            duration: 0
        },
    }
...
};

score:1

my version is v2.8.0 i find a work way, try it.

add

legend : {

                }

into option

var donutoptions     = {
                maintainaspectratio : false,
                responsive : true,
                animation: {
                    animatescale: true,
                    animaterotate: true
                },
                tooltips: {
                    intersect: false,
                    callbacks: {
                        label: function (tooltipitem, data) {
                            ...
                        }
                    },
                },
                plugins: {
                    datalabels: {
                        ...
                        },
                    },
                },
                legend : {

                }

            };

and use this


donutchart.chart.getdatasetmeta(0).data[index].hidden = true;

donutchart.update();

score:4

this is now available in charts.js

from the documentation http://www.chartjs.org/docs/#chart-configuration-legend-configuration

legend configuration

the legend configuration is passed into the options.legend namespace. the global options for the chart legend is defined in chart.defaults.global.legend.

onclick function(event, legenditem) {} a callback that is called when a 'click' event is registered on top of a label item

onhover function(event, legenditem) {} a callback that is called when a 'mousemove' event is registered on top of a label item

score:14

you can try this
create store for hidden datasets

window.chartname = new chart(...

window.chartname.store = new array();

then use this function to update chart, must be handled by click on legend item

function updatedataset(legendli, chart, label) {
      var store = chart.store;
      var exists = false;
      for (var i = 0; i < store.length; i++) {
        if (store[i][0] === label) {
          exists = true;
          chart.datasets.push(store.splice(i, 1)[0][1]);
          legendli.fadeto("slow", 1);
        }
      }
      if (!exists) {
        for (var i = 0; i < chart.datasets.length; i++) {
          if (chart.datasets[i].label === label) {
            chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
            legendli.fadeto("slow", 0.33);
          }
        }
      }
      chart.update();
    }

don't forget updated legend template in chart options

legendtemplate : "<ul class=\"<%=name.tolowercase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updatedataset($(this), window.chartname, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokecolor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

shortly, i added this onclick handler for li component

<li class=\"legend-item\" onclick=\"updatedataset($(this), window.chartname , '<%=datasets[i].label%>')\"><

for example fiddle


Related Query

More Query from same tag