Chart Js Stacked Bar Chart with Multiple levels or categories

Question

I am trying to create a chart in ng2-charts that will have multiple labels, so for example the x access would have categories of all the Months, above that it will be broken down into each week, and then the bar sections would be something like rainy days, dry days, and snowy days.

I have found their documentation here https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html and have their example working, but need to expand on that to add another level, is that possible?

Set the stack option of all the datasets you want to stack to the same value. Check the "Setup" tab in the example you linked — Matthias Schmidt
@MatthiasSchmidt Thank you, that makes sense, do you know if they have a way to display the labels for the stacks? — dmoore1181

dmoore1181 dmoore1181 · Accepted Answer · 2021-04-15T17:37:12

The following is what I was able to get figured out. This code will allow create a chart with 3 categories on the x axis divided into 4 categories each. This isn't the full code set, but should hopefully give others an idea on how to proceed if they are stuck.

<canvas baseChart
  *ngIf="!loading"
  [datasets]="myChartData.chartData"
  [options]="barChartOptions"
  [legend]="barChartLegend"
  [chartType]="barChartType"
>
</canvas>

The following is the code that is used to set the bar chart options from data being returned by the api

this.barChartOptions = {
      responsive: true,
      scales: {
        xAxes: [
          {
            id: 'xAxis1',
            type: 'category',
            labels: this.myChartData.xAxis1Labels,
          },
          {
            id: 'xAxis2',
            type: 'category',
            labels: this.myChartData.xAxis2Labels,
            offset: true
          },
        ],
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
              callback: function(value: number) {if (value % 1 === 0) {return value;}}
            }
          }
        ]
      },
      title: {
        display: true,
        text: this.myChartData.title,
      },
      legend: {
        labels: {
          filter: function (item, chart) {
            return item.text !== undefined && item.text !== null;
          },
        },
      },
      tooltips: { enabled: false },
      hover: { mode: null },
    };

This is the model that the api is returning:

import { ChartData } from "chart.js";

export class myChartData {
  chartData: Array<ChartData>;
  rankXAxisLabels: Array<string>;
  namcXAxisLabels: Array<string>;
  title: string;
}

Lastly, this is the format of the chartData Array that is being built by the api:

[
  {
    "data": [1,0,9,0,4,0,5,8,0,0,0,0],
    "label": "firstPartOfBar",
    "stack": "dataStack",
    "backgroundColor": "red",
    "hoverBackgroundColor": "red",
    "xAxisID": "xAxis1"
  },
  {
    "data": [1,0,8,0,5,0,0,0,0,0,6,7],
    "label": "Second Part of Bar",
    "stack": "dataStack",
    "backgroundColor": "blue",
    "hoverBackgroundColor": "blue",
    "xAxisID": "xAxis1"
  },
  {
    "data": [4,0,2,0,1,0,0,0,12,14,16,0],
    "label": "Third Part of stack",
    "stack": "dataStack",
    "backgroundColor": "green",
    "hoverBackgroundColor": "green",
    "xAxisID": "xAxis1"
  }
]

Chart Js Stacked Bar Chart with Multiple levels or categories

1 Answers