Chartjs-ChartJS does not display the legend

by

0👍

✅

Add data in the datasets. If the data is none, add default data to be 0, to show the Legend.

var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var ctx = document.getElementById("trend_chart").getContext('2d');

var config = {
    type: 'bar',
    responsive: true,
    type: 'line',
    data: {
        labels: chart_labels,
        datasets: [{
          label: chart_labels[0],
          data: [0]
         }, {
          label: chart_labels[1],
          data: [0]
         }, {
            label: chart_labels[2],
            data: [0]
         }, {
            label: chart_labels[3],
            data: [0]
         }, {
            label: chart_labels[4],
            data: [0]
         }, {
            label: chart_labels[5],
            data: [0]
         }, {
            label: chart_labels[6],
            data: [0]
         }, {
            label: chart_labels[7],
            data: [0]
         }, {
            label: chart_labels[7],
            data: [0]
         }, {
            label: chart_labels[8],
            data: [0]
         }, {
            label: chart_labels[9],
            data: [0]
         }, {
            label: chart_labels[10],
            data: [0]
         }, {
            label: chart_labels[11],
            data: [0]
         }
      ]
    },
    options: {
        legend: {
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    max: 100,
                    display: true,
                    beginAtZero: true
                }
            }]
        }
    }
};

var myChartData = new Chart(ctx, config);

Leave a comment