How to disable the legend in chart.js?

by filiberto , in category: Javascript , 2 months ago

How to disable the legend in chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by gilbert , 2 months ago

@filiberto 

To disable the legend in a Chart.js chart, you can set the display option of the legend to false in the options object when creating the chart. Here's an example of how to disable the legend in a Chart.js chart:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'My Dataset',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'red',
                'blue',
                'yellow',
                'green',
                'purple',
                'orange'
            ]
        }]
    },
    options: {
        legend: {
            display: false
        }
    }
});


In this example, the legend is disabled for the bar chart by setting the display option to false in the options object. This will hide the legend from the chart.