HTML legend example

Hello, I love this plugin to be able to create charts. However, I’ve looked and cannot understand or find a way to use the legendCallback function to create an HTML legend.

Can you provide a link or an example of how to use the legendCallback or chartInstance.generateLegend? I have read the documentation and scoured the issues, but am not familiar on how to customize this code. What does the HTML legend look like?

[jcopperfield]

@sensaetions The default generateLegend() function will generate a <ul class="0-legend"> for the chart, which you can style using the css descriptor [class="0-legend"]. The 0 is the chart.id. In the following example you’ll find a chart with a HTML generated legend, which mimics the default legend.

CSS

[class="0-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}
[class="0-legend"] li {
  display: inline-block;
  padding: 0 5px;
}
[class="0-legend"] li.hidden {
  text-decoration: line-through;
}
[class="0-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10px;
}

JavaScript to create HTML legend

var myLegendContainer = document.getElementById("myChartLegend");

// generate HTML legend
myLegendContainer.innerHTML = myChart.generateLegend();

// bind onClick event to all LI-tags of the legend
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i += 1) {
  legendItems[i].addEventListener("click", legendClickCallback, false);
}

JavaScript legend onClick callback

function legendClickCallback(event) {
  event = event || window.event;

  var target = event.target || event.srcElement;
  while (target.nodeName !== 'LI') {
      target = target.parentElement;
  }
  var parent = target.parentElement;
  var chartId = parseInt(parent.classList[0].split("-")[0], 10);
  var chart = Chart.instances[chartId];
  var index = Array.prototype.slice.call(parent.children).indexOf(target);

  chart.legend.options.onClick.call(chart, event, chart.legend.legendItems[index]);
  if (chart.isDatasetVisible(index)) {
    target.classList.remove('hidden');
  } else {
    target.classList.add('hidden');
  }
}

default legendCallback

https://github.com/chartjs/Chart.js/blob/ce1fc28b743d518add5c89653108a287f6aa911d/src/plugins/plugin.legend.js#L67-L80

Edit: modified legendClickCallback to call the chart onClick-event.

[LeeLenaleee]

@MadalinaCi you can use a custom inline plugin for this: https://jsfiddle.net/Leelenaleee/drk3unhs/4/