Chart.js - Legend-alljchome-开发者的教程家园

Chart.js Tutorial

Selected Reading

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.
Apgn	string	center	It is used to set the apgnment 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 imppes, if true, the box will take the full width/height of the canvas.
onCpck	function		It is a callback function which is called when you register a cpck 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 imppes, 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 imppes, 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/pbs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "pne",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "onpne tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: [ coral ,  aqua ,  pink ,  pghtgreen ,  pghtblue ,  crimson ],
               borderColor: [
                  "black",
               ],
               borderWidth: 1,
               pointRadius: 5,
            }],
         },
         options: {
               responsive: false,
               plugins: {
                  legend: {
                     display: true,
                     position:  bottom ,
                     apgn:  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

Syntax

Example

Output

友情链接