Chartjs-Unable to get the expected legend shown in chart js

by

0👍

Please read the documentation to understand how the data is populated.

All the properties in labels corresponds to what is to be shown in the xAxis in your case it is inverted.

The number of items in the datasets corresponds to the legend and the label property of each dataset is used as the text for the legend.

Please see the changes code as per my understanding of your problem or fiddle -> https://jsfiddle.net/bcxzu39v/

var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
  labels: [
    "AMER",
    "APAC",
    "EMEA"
  ],
  datasets: [{
      label: ['SFO'],
      data: [23.2, 0, 0],
      backgroundColor: 'red'
    },
    {
      label: ['CHI'],
      data: [6.3, 0],
      backgroundColor: 'brown'
    },
    {
      label: ['INDIA'],
      data: [0, 3, 0],
      backgroundColor: 'green'
    },
    {
      label: ['ANZ'],
      data: [0, 7, 0],
      backgroundColor: 'lightgreen'
    }
  ]
};

var MeSeChart = new Chart(MeSeContext, {
  type: 'horizontalBar',
  data: MeSeData,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,

      }]
    }
  }
});

Leave a comment