Chartjs-How to use generated HTML legends to enable or disable datasets in Chart.js

0👍

You can actually use the getDatasetMeta API to realise it, as demonstrated below:

$('#js-legend').click(function(e) {
  var targetLi = $(e.target).closest('li');
  targetLi.toggleClass('inactive');

  if (targetLi.hasClass('inactive')) {
      myChart.getDatasetMeta(targetLi.index()).hidden=true;
  } else {
    myChart.getDatasetMeta(targetLi.index()).hidden=false;
  }    
    myChart.update();
});

You can find the example on jsfiddle.

Leave a comment