ChartJS remove the legends at the top of the chart

by

👍:0

As descripbed in the migration docs and the namespace in the legend config page in the docs it states that to configure the legend you need to put it in the plugins part of the config since its an internal plugin.

Migration docs: https://www.chartjs.org/docs/master/getting-started/v3-migration.html#specific-changes

Legend docs: https://www.chartjs.org/docs/master/configuration/legend.html#configuration-options

Working Example:

let config01 = {
  type: 'doughnut',
  data: {
    labels: [
      'Part 01',
      'Part 02',
      'Part 03'
    ],
    datasets: [{
      data: [2000, 1000, 600],
      backgroundColor: [
        'rgb(0, 76, 138)',
        'rgb(50, 151, 230)',
        'rgb(250, 202, 55)',
      ],
      hoverOffset: 10
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
    },
  }
};

var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);
<div>
  <canvas id="myChart-01" width="200px" height="200px"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
</div>

Leave a comment