I am using charts.js to create a charts for my website.
I am unable the remove the legend from the chart.
I did not found the solution. This is the first time I am using charts.js library.
code:
JavaScript
x
48
48
1
const ctx1 = document.getElementById('yearWise').getContext('2d');
2
const yearWise = new Chart(ctx1, {
3
type: 'bar',
4
plugins: [ChartDataLabels],
5
6
data: {
7
legend: 'options',
8
labels: ['2018-19','2019-20','2020-21','2021-22'],
9
datasets: [{
10
data: [90,400,5245,5122],
11
backgroundColor: [
12
// 'rgba(255, 99, 132, 0.5)',
13
'rgba(70, 132, 238, 0.5)',
14
],
15
borderColor: [
16
// 'rgba(255, 99, 132, 1)',
17
'rgba(70, 132, 238, 1)',
18
],
19
borderWidth: 1
20
}]
21
},
22
options: {
23
legend: {
24
display: false,
25
},
26
responsive: true,
27
scales: {
28
y: {
29
beginAtZero: true,
30
}
31
},
32
plugins: {
33
title: {
34
display: true,
35
text: 'Programs Conducted - Year Wise',
36
},
37
datalabels: {
38
anchor: 'end',
39
align: 'end',
40
labels: {
41
value: {
42
color: 'rgba(70, 132, 238, 1)'
43
}
44
}
45
},
46
},
47
}
48
}); Thanks in advance.
Advertisement
Answer
Here is the documentation https://www.chartjs.org/docs/latest/configuration/legend.html
you can simply set legend.display
to false.
JavaScript
1
8
1
options: {
2
plugin: {
3
legend: {
4
display: false,
5
}
6
}
7
}
8
You can try it here https://codesandbox.io/s/wonj2xn23w?file=/src/index.js