Legends are displayed by default in bar, line, pie and doughnut charts. They appear as a list of labeled, colored boxes that relate to the color of the lines, bars, or slices represented by a dataset, and they are rendered on the screen even when there is a single dataset. In such cases, you may wish to hide them. You can also tune several other properties and callbacks. The most important properties are listed as follows:

There are also two callbacks you can attach to legends:

The following example contains a simple three-dataset line chart. Instead of hiding the dataset, the onClick callback for the legends was overridden to change the color of the selected dataset to gray. Note that the dataset index is obtained from the callback parameters, but the dataset properties are changed in the object tree for the current chart (this.chart.data.datasets):

const data = [[12,19,3,5,2,3],[6,5,33,2,7,11],[2,3,5,16,0,1]],
   strokes = ['rgba(54,162,235,1)','rgba(255,99,132,1)', 
              'rgba(132,255,99,1)'],
   fills =  
   ['rgba(54,162,235,.2)','rgba(255,99,132,.2)','rgba(132,200,99,.2)']; const grayFill = 'rgb(0,0,0,.2)';
const grayStroke = 'rgb(0,0,0,.8)';
 
const datasets = [];
for(const i = 0; i < data.length; i++) {
     datasets.push({
         label: 'Dataset ' + (i+1),
         data: data[i],
         backgroundColor: fills[i],
         borderColor: strokes[i],
         borderWidth: 1
     });
 }
 
 const myChart = new Chart("myChart", {
     type: 'line',
     data: {
         labels: ['Day 1','Day 2','Day 3','Day 4','Day 5','Day 6'],
         datasets: datasets,
     },
     options: {
         legend: {
             position: 'left',
             reverse: true,
             onClick: function(event, label) {
                 const index = label.datasetIndex;
                 const dataset = this.chart.data.datasets[index];
                 if(dataset.backgroundColor == fills[index]) {
                     dataset.backgroundColor = grayFill;
                     dataset.borderColor = grayStroke;
                 } else {
                     dataset.backgroundColor = fills[index];
                     dataset.borderColor = strokes[index];
                 }
                 this.chart.update();
             }
         }
     }
 })

The following screenshots show the chart before and after clicking on a dataset. See the full code in Text/text-1-legend-callback.html:

The legend.labels property is used to configure the appearance of the individual legend labels. The following table shows the properties you are most likely to use:

There is no property to set the color of the colored box. It will normally inherit from the global defaultColor if no colors are assigned to the datasets. You can change this behavior with the generateLabels callback property. You can also filter out unwanted labels by assigning a function to the filter callback property. These are listed as follows:

Label styles can be configured inside the options object, in each chart instance, or for all charts using the Global.defaults.legend object, for example:

    Chart.defaults.global.legend.labels.fontSize = 16;
    Chart.defaults.global.legend.labels.boxWidth = 20;

The following filter configuration will only show the labels for datasets that have a maximum value below 20. All three datasets will be shown, but only two labels will be displayed (Text/text-2-legend-label.html):

labels: {
    filter: function(label, item) {
      return Math.max(...item.datasets[label.datasetIndex].data) <= 20;
    }
}

The generateLabels callback should only be implemented if you want to create your own legend. If you have a very complex legend, you can generate an HTML legend implementing a callback function for the Chart.defaults.global.legendCallback property or in each chart using the legendCallback property in options. This will be explored in Chapter 7, Advanced Chart.js.