Legend
The chart legend can be customized via the options.legend property (see chart legend in Chart.js v2 and chart legend in Chart.js v3+).
To display the legend, set display to true.
Valid legend position settings:
- top (default)
- left
- bottom
- right
Valid legend align settings:
- center (default)
- start
- end
In the example below, we choose to show the legend by setting display to true, and then set the position and align properties to move it where we want to see it.
{
type: 'line',
data: {
labels: [2016, 2017, 2018, 2019, 2020],
datasets: [
{
label: 'Dollars',
data: [1000, 1234, 2020, 2005, 1300],
},
{
label: 'Users',
data: [50, 150, 250, 350, 400],
}
],
},
options: {
legend: {
display: true,
position: 'right',
align: 'start'
}
}
}