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>

Answer 1

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

Answer 2

Adding this to the options worked for me:

plugins: {
    legend: false,
}

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

Answer 3

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

Answer 4

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

Answer 5

You should set the legend option to 'none'

{ legend: 'none' }

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