HTML legend example

1 thought on “HTML legend example”

1. @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

   Chart.js/src/plugins/plugin.legend.js

   Lines 67 to 80
   in
   ce1fc28

   	legendCallback: function(chart) {
   	var text = [];
   	text.push(‘<ul class=”‘ + chart.id + ‘-legend”>’);
   	for (var i = 0; i < chart.data.datasets.length; i++) {
   	text.push(‘<li><span style=”background-color:’ + chart.data.datasets[i].backgroundColor + ‘”></span>’);
   	if (chart.data.datasets[i].label) {
   	text.push(chart.data.datasets[i].label);
   	}
   	text.push(‘</li>’);
   	}
   	text.push(‘</ul>’);
   	return text.join(”);
   	}
   	});

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

Comments are closed.