- Chart.js Tutorial
- Chart.js - Home
- Chart.js - Introduction
- Chart.js - Installation
- Chart.js - Syntax
- Chart.js - Basics
- Chart.js - Color
- Chart.js - Options
- Chart.js - Interactions
- Chart.js - Legend
- Chart.js - Title
- Chart.js - Animation
- Chart.js - Tooltip
- Chart.js - Line Chart
- Chart.js - Bar Chart
- Chart.js - Radar Chart
- Chart.js - Doughnut Chart
- Chart.js - Pie Chart
- Chart.js - Polar Area Chart
- Chart.js - Bubble Chart
- Chart.js - Scatter Chart
- Chart.js - Mixed Chart
- Chart.js - Cartesian Axis
- Chart.js - Category Axis
- Chart.js - Radial Axis
- Chart.js Useful Resources
- Chart.js - Quick Guide
- Chart.js - Useful Resources
- Chart.js - Discussion
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 −
Advertisements
To Continue Learning Please Login
Login with Google