Creating a multi-bar chart using Chart.JS

Question

Creating a multi-bar chart using Chart.JS

I integrated Chart.JS into my Angular 9 application. However, the chart is not displaying as I expected.

ngOnInit(): void {
  this.smdashboardservice.fetchSmDashboardData().subscribe(response=>{

    let data = [
      {"label":"Application","sublabel":"Nice","count":2},
      {"label":"Application","sublabel":"poor","count":1},
      {"label":"Channels","sublabel":"Quality","count":2},
      {"label":"Customer Care","sublabel":"support","count":2}
    ]

    this.barChartLabels = Object.keys(data);
    this.barChartLabels.forEach(label => {
      this.barChartData[0].data.push(data[label]['count']);
    });

  })
}

The current code displays the chart like this:

https://i.sstatic.net/2uMm7.png

However, I am aiming for a chart that looks like this:

https://i.sstatic.net/PTS4m.png

Check out the demo here

angular typescript charts chart.js angular9

Answer 1

Answer №1

To organize the datasets, it is important to categorize the sublabel.

Ensure that each dataset includes values corresponding to the x-axis categories (label), which in this case is set to 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;

Check out the Demo on StackBlitz

You can simplify the process by using the following alternative for subLabelDatasets:

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

Answer 2

To organize the datasets, it is important to categorize the sublabel.

Ensure that each dataset includes values corresponding to the x-axis categories (label), which in this case is set to 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;

Check out the Demo on StackBlitz

You can simplify the process by using the following alternative for subLabelDatasets:

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

Creating a multi-bar chart using Chart.JS

Answer №1

Similar questions

What is the reason behind the ineffectiveness of injection in abstraction?

Is it possible to incorporate regular React JSX with Material UI, or is it necessary to utilize TypeScript in this scenario?

Adding images to chart labels in vue-chartjs explained

Error message: "The property 'ɵunwrapWritableSignal' is not found on the type 'typeof import_modules/@angular/core/core'". Here is how you can troubleshoot this issue in HTML files

The NGXS state does not get updated when a lazy loaded component is used

@The value of @Input is consistently undefined

Could I possibly incorporate @mui/material into an Angular project?

Tips for showing legend symbols within tooltips on Highcharts

Scroll-triggered Angular 4 sliding functionality

How to pre-select a value in Angular PrimeNG dropdown on initialization

Employing Bazel in conjunction with Lerna and Yarn workspaces

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Encountering a TypeError while working with Next.js 14 and MongoDB: The error "res.status is not a function"

Arrange items in a single parent Div in flex-column format, aligning them to the left and

Ways to activate a function onInit in Angular version 9

How can I initialize the value of a dropdown menu in Angular 2?

Navigating UnwrapRefSimple in Vue Composition API and TypeScript: Best Practices

What is the best way to retrieve the filepath of a module that is lazily loaded

Translate JSON to TypeScript class. If the property is an object and not present in the JSON, the class should contain an empty object

Angular2 Final: Issue with inline template - incorrect format for number pipes