Chartjs-Chart Js Stacked Bar Chart with Multiple levels or categories

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"
  }
]