Chart.js - Legend

Chart.js legend displays that data about the dataset which is going to be seen on our chart or graph. The namespace for Legend configuration options is options.plugins.legend whereas, the global option for the chart legend is defined in Chart.defaults.plugins.legend.

The table below gives the descriptions of various kinds of configuration options we can use with chart legend −

Name Type Default Description
Display Boolean true If true, it will show the legend, else NOT.
Position string 'top' It is used to set the position of the legend. The default is top position.
Align string 'center' It is used to set the alignment of the legend. The default is center position.
maxHeight number It will set the maximum height of the legend in pixels.
maxWidth number It will set the maximum width of the legend in pixels
fullSize Boolean true As name implies, if true, the box will take the full width/height of the canvas.
onClick function It is a callback function which is called when you register a click event on a label item.
onHover function It is a callback function which is called when you register a 'mousemove' event on the top of a label item.
onLeave function It is a callback function which is called when you register a 'mousemove' event outside of a previously hovered label item.
Reverse Boolean false As name implies, with this configuration, the legend will show datasets in reverse order. The default value if false.
Labels object You can use various Legend Label Configurations such as color, font, padding, boxWidth, boxHeight, etc.
Rtl Boolean If true, the legend will render from right to left.
textDirection string canvas' default As name implies, this configuration will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas
Title object You can use various Legend Title Configurations such as color, font, padding, text, display, etc.

Syntax

The Chart Legend syntax is given below −

legend: {
   display: true,
   position: 'bottom',
   labels: { color: 'darkred', }
}

The legend enabled property must be true to display the data label. If it sets to false, then the legend becomes deactivated.

Example

Let’s take an example in which we will be using various Legend configurations −

<!DOCTYPE html>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "line",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: [
                  "black",
               ],
               borderWidth: 1,
               pointRadius: 5,
            }],
         },
         options: {
               responsive: false,
               plugins: {
                  legend: {
                     display: true,
                     position: 'bottom',
                     align: 'center',
                     labels: {
                        color: 'darkred',
                        font: {
                           weight: 'bold'
                        },
                     }
                  }
               }
            }
         });
   </script>
</body>
</html>

Output

Take a look at the output. It shows the various Legend configurations −

Chart.js Legend
Advertisements