0

I want to display multiple labels in the graph that is being displayed in my application.

Link to Chartjs library

In the library, you can see that the bar chart has a single label, "My First Dataset", being displayed at the top of the graph. I want another label with the next colour.

Here's my code:

this.chartData = {
  labels: [
    ...labelList
  ],
  datasets: [
    {
      label: ['Digital Revenue', 'Standard Revenue'], //I want these two at the top
      data: [
        ...dataList
      ],
      backgroundColor: [
        'rgb(255, 99, 132)',  //using these two colours, but I am getting both values with a single colour
        'rgb(54, 162, 235)',
      ],
      hoverOffset: 4,
    },
  ],
};
this.chartConfig = {
  type: CHART_CONFIG.BAR_CHART,
  data: this.chartData,
  options: {},
};

this.myChart = new Chart(
  document.getElementById('myChart') as HTMLCanvasElement,
  this.chartConfig
);
Package.JSON
  • 301
  • 5
  • 25
  • Or you can use a custom [`generateLabels`](https://www.chartjs.org/docs/3.7.1/configuration/legend.html#legend-label-configuration) function – LeeLenalee Jun 28 '22 at 10:49
  • Chart.js will automatically add a label if you add another dataset. Theres an example of multiple datasets in [the documentation](https://www.chartjs.org/docs/latest/samples/area/line-datasets.html). – Luca Jun 28 '22 at 11:05

0 Answers0