How to disable the legends in chart.js?

Question

I'm trying to style a chart using chart.js but I can't figure out how to disable the legends. At the same time I want to use the generateLegend() to style the legends somewhere else on the page. So I just want to disable the legends inside the canvas element. Can you guys help me?

Here's my code:

canvas id="myChart"></canvas>
                        <div id="legendq3"></div>
                        <script> 
                            var ctx = document.getElementById("myChart");

                            var data = {
                                labels: [
                                    "Red",
                                    "Green",
                                    "Yellow"
                                ],
                                datasets: [
                                    {
                                        data: [300, 50, 100],
                                        backgroundColor: [
                                            "#FF6384",
                                            "#36A2EB",
                                            "#FFCE56"
                                        ],
                                        hoverBackgroundColor: [
                                            "#FF6384",
                                            "#36A2EB",
                                            "#FFCE56"
                                        ]
                                    }]
                            };

                            var options = {
                                 legendTemplate :'<ul>'
                                                +'<% for (var i=0; i<datasets.length; i++) { %>'
                                                +'</li>'
                                                +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
                                                +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
                                                +'</li>'
                                                +'</ul>'

                            }

                            var myDoughnutChart = new Chart(ctx, {
                                type: 'doughnut',
                                data: data,
                                options: options
                            });

                            document.getElementById('legendq3').innerHTML = myDoughnutChart.generateLegend();
                        </script>

I believe `Chart.defaults.global.legend.display = false;` will globally display a legend from displaying. — Biruk Abebe, Apr 30 '16 at 13:08
Thanks but can you tell me where specifically in my code I should insert this — Willy Mercier, Apr 30 '16 at 13:10
I believe `Chart.defaults.global.legend.display = false;` will globally disable a legend from displaying placed at the start of your script since this will globally disable legends for all charts. — Biruk Abebe, Apr 30 '16 at 13:12
Possible duplicate of [Removing legend on charts with chart.js v2](https://stackoverflow.com/questions/36749509/removing-legend-on-charts-with-chart-js-v2) — Tot Zam, Jun 02 '17 at 15:01

score 12 · Answer 1 · answered May 13 '21 at 06:24

12

Adding this to the options worked for me:

plugins: {
    legend: false,
}

src: https://www.chartjs.org/docs/latest/configuration/tooltip.html

answered May 13 '21 at 06:24

Alian713

232
2
9

bir_ham · Answer 2 · 2018-08-10T21:40:20.713

6

This probably is late for the person who originated the question. But, I still put the solution that worked for me without much hassle for the next guys who might encounter the same problem. Just pass display property false value to both legend & labels properties, like bellow.

options: {
  legend: {
    display: false,
      labels: {
        display: false
      }
  }
}

edited Aug 10 '18 at 21:40

answered Oct 15 '16 at 18:27

bir_ham

513
5
19

score 2 · Answer 3 · answered Apr 30 '16 at 13:10

2

The global options for the chart legend is defined in Chart.defaults.global.legend

Put this in your code (after you declare the chart):

myDoughnutChart.defaults.global.legend.display = false

answered Apr 30 '16 at 13:10

omarjmh

13,632
6
34
42

Actually it makes the legends that I created with myDoughnutChart.generateLegend(); I actually want the original legends to disappear, i.e. the one with the block of colors. – Willy Mercier Apr 30 '16 at 17:04

score 1 · Answer 4 · answered Jan 08 '19 at 09:51

1

From the documentation, the below property can be added to the options object to hide the legend:

var chart = new Chart(canvas, {
    type: 'pie',
    data: data,
    options: {
        legend: {
            display: false
        }
}
});

answered Jan 08 '19 at 09:51

siddharth.prakash

31
1
4

score 0 · Answer 5 · answered Apr 23 '20 at 11:33

0

You should set the legend option to 'none'

{ legend: 'none' }

Source : https://developers.google.com/chart/interactive/docs/gallery/piechart

answered Apr 23 '20 at 11:33

Karam Haj

1,080
2
9
20

How to disable the legends in chart.js?

5 Answers5