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'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>

• javascript
• jquery
• charts

• 1 I believe Chart.defaults.global.legend.display = false; will globally display a legend from displaying. – Biruk Abebe Commented Apr 30, 2016 at 13:08
• Thanks but can you tell me where specifically in my code I should insert this – Willy Mercier Commented Apr 30, 2016 at 13:10
• 1 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 Commented Apr 30, 2016 at 13:12
• Possible duplicate of Removing legend on charts with chart.js v2 – Tot Zam Commented Jun 2, 2017 at 15:01

5 Answers 5

Adding this to the options worked for me:

plugins: {
    legend: false,
}

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

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
      }
  }
}  

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

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
        }
}
});

You should set the legend option to 'none'

{ legend: 'none' }

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