[Chartjs]-Angular 9 chart js mutibar

by

1👍

✅

You need to prepare the datasets which categorize the sublabel.

Each dataset should contain the values with the length of x-axis category (label), which is 3.

let labels = [...new Set(data.map((x) => x.label))];
let subLabels = [...new Set(data.map((x) => x.sublabel))];
let subLabelDatasets = subLabels.map((x) => {
  let datasets = [];

  for (let label of labels) {
    datasets.push(
      data.find((y) => y.label == label && y.sublabel == x)?.count || 0
    );
  }

  return {
    label: x,
    data: datasets,
  };
});

this.barChartLabels = labels;
this.barChartData = subLabelDatasets;

Demo @ StackBlitz

Alternative: subLabelDatasets can be simplified as:

let subLabelDatasets = subLabels.map((x) => ({
  label: x,
  data: labels.map(
    (label) =>
      data.find((y) => y.label == label && y.sublabel == x)?.count || 0
  )
}));

Leave a comment