HTML Legend

This example shows how to create a custom HTML legend using a plugin and connect it to the chart in lieu of the default on-canvas legend.

  • Dataset: 1

  • Dataset: 1

HTML Legend - 图1

plugin data setup

  1. const getOrCreateLegendList = (chart, id) => {
  2.   const legendContainer = document.getElementById(id);
  3.   let listContainer = legendContainer.querySelector('ul');
  5.   if (!listContainer) {
  6.     listContainer = document.createElement('ul');
  7.     listContainer.style.display = 'flex';
  8.     listContainer.style.flexDirection = 'row';
  9.     listContainer.style.margin = 0;
  10.     listContainer.style.padding = 0;
  12.     legendContainer.appendChild(listContainer);
  13.   }
  15.   return listContainer;
  16. };
  18. const htmlLegendPlugin = {
  19.   id: 'htmlLegend',
  20.   afterUpdate(chart, args, options) {
  21.     const ul = getOrCreateLegendList(chart, options.containerID);
  23.     // Remove old legend items
  24.     while (ul.firstChild) {
  25.       ul.firstChild.remove();
  26.     }
  28.     // Reuse the built-in legendItems generator
  29.     const items = chart.options.plugins.legend.labels.generateLabels(chart);
  31.     items.forEach(item => {
  32.       const li = document.createElement('li');
  33.       li.style.alignItems = 'center';
  34.       li.style.cursor = 'pointer';
  35.       li.style.display = 'flex';
  36.       li.style.flexDirection = 'row';
  37.       li.style.marginLeft = '10px';
  39.       li.onclick = () => {
  40.         const {type} = chart.config;
  41.         if (type === 'pie' || type === 'doughnut') {
  42.           // Pie and doughnut charts only have a single dataset and visibility is per item
  43.           chart.toggleDataVisibility(item.index);
  44.         } else {
  45.           chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
  46.         }
  47.         chart.update();
  48.       };
  50.       // Color box
  51.       const boxSpan = document.createElement('span');
  52.       boxSpan.style.background = item.fillStyle;
  53.       boxSpan.style.borderColor = item.strokeStyle;
  54.       boxSpan.style.borderWidth = item.lineWidth + 'px';
  55.       boxSpan.style.display = 'inline-block';
  56.       boxSpan.style.height = '20px';
  57.       boxSpan.style.marginRight = '10px';
  58.       boxSpan.style.width = '20px';
  60.       // Text
  61.       const textContainer = document.createElement('p');
  62.       textContainer.style.color = item.fontColor;
  63.       textContainer.style.margin = 0;
  64.       textContainer.style.padding = 0;
  65.       textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
  67.       const text = document.createTextNode(item.text);
  68.       textContainer.appendChild(text);
  70.       li.appendChild(boxSpan);
  71.       li.appendChild(textContainer);
  72.       ul.appendChild(li);
  73.     });
  74.   }
  75. };
  1. const NUM_DATA = 7;
  2. const NUM_CFG = {count: NUM_DATA, min: 0, max: 100};
  3. const data = {
  4.   labels: Utils.months({count: NUM_DATA}),
  5.   datasets: [
  6.     {
  7.       label: 'Dataset: 1',
  8.       data: Utils.numbers(NUM_CFG),
  9.       borderColor: Utils.CHART_COLORS.red,
  10.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  11.       fill: false,
  12.     },
  13.     {
  14.       label: 'Dataset: 1',
  15.       data: Utils.numbers(NUM_CFG),
  16.       borderColor: Utils.CHART_COLORS.blue,
  17.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  18.       fill: false,
  19.     },
  20.   ],
  21. };
  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     plugins: {
  6.       htmlLegend: {
  7.         // ID of the container to put the legend in
  8.         containerID: 'legend-container',
  9.       },
  10.       legend: {
  11.         display: false,
  12.       }
  13.     }
  14.   },
  15.   plugins: [htmlLegendPlugin],
  16. };

Docs