[Chartjs]-Chart.js not showing legends

by

3👍

✅

Solved, the Bootstrap template I was using had this code somewhere in its .js

Chart.defaults.global.legend = {
  enabled: false
};

8👍

Next to adding the legend config into options Legend – Chart.js docs :

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                display: true,
            }
        }
    }
});

You have to import and register the module
when using build tools like Webpack or Rollup Integration – Chart.js docs:

Chart.register(
  Legend,
)

Or use one of the auto-register methods :

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

or:

import Chart from 'chart.js/auto';

5👍

you can add this in options.

legend: {
     display: true
}

0👍

To show the legend label the chart, add this to your configuration.

legend: {
    display: true
}

Leave a comment