CODEWITHSUNDEEP
chart.js
Page Russell
Page Russell

Reputation: 43

How to remove Chart.js legend

I have tried to set the legend option to display: false, but no matter what I do the legend does not go away.

I have triple checked my syntax, and scoured this site, but I cannot figure out why this label will not disappear.

See codepen: https://codepen.io/peidj/pen/dyNrJqP

var config_overdue = {
                    type: 'bar',
                    data: {
                        labels: [
                            '90 Days Overdue',
                            '180 Days Overdue',
                            '365 Days Overdue'
                        ],
                        datasets: [{
                            label: 'HOW DO I DELETE THIS??',
                            data: [100,500,1000],
                            backgroundColor: [
                                'rgba(255, 205, 86, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 99, 132, 0.2)'
                            ],
                            borderColor: [
                                'rgb(255, 205, 86)',
                                'rgb(255, 159, 64)',
                                'rgb(255, 99, 132)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        indexAxis: 'y',
                        plugins: {
                            title: {
                                display: true,
                                text: 'Overdue Trainings'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            },
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItem) {
                                    console.log(tooltipItem)
                                    return tooltipItem.yLabel;
                                }
                            }
                        }
                    }
                };
                  
var chart_all_uwf_overdue = document.getElementById('chart_all_uwf_overdue').getContext('2d');
                  new Chart(chart_all_uwf_overdue, config_overdue);
div {
  max-width: 500px;
}
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
  </head>
  <body>
    
    <div>
    <canvas id="chart_all_uwf_overdue"  width="600" height="400"></canvas>
    </div>
  </body>
</html>

Upvotes: 2

Views: 450

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

In version 3 the legend has moved to the plugin section in the options so if you put it like this it will hide the legend:

options: {
   plugins: {
      legend: {
         display: false
      }
   }
}

Upvotes: 3

Related Questions