Bar chart with Multiple grouped datasets

I have to create the same graph as shown in the attached picture which I created on excel. I have following through the documentation and tried multiple times different approaches but couldn’t be succeeded in setting x-axis labels and values like in the attached picture. What am I doing wrong?

Here is my code which I tried but failed to set year wise total Expenditure and total Budget values which are grouped on codes “SC21106” and “SC21108”

var barChartData = {
  labels: [
    ["SC21106",
    "SC21108",],["2016",2017","2018","2019"]
  ],
  datasets: [
    {
      label: "Total Expenditure",
      backgroundColor: "Red",
      data: [300000000, 555555555,555555554,666666665]
    },
    {
      label: "Total Budget",
      backgroundColor: "pink",
      data: [500000000, 77777555,566666654,666666665]
    },
  ]
};

var chartOptions = {
  responsive: true,
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

Target to achieve:

P.S : I am new to Chart js and the code I tried has rough values. In short, I just want a chart js bar graph like the picture I attached.

Any help would be highly appreciated.

[stockiNail]

@ByteMates as @etimberg wrote (thanks!), there is a plugin which can do something close to what you want.

Anyway I spent some minutes to create a dedicated plugin to have the same representation of your picture. It’s not a generic plugin but something dedicated for this use case.

https://codepen.io/stockinail/pen/vYLyXop

[etimberg]

@stockiNail has a good solution. https://github.com/sgratzl/chartjs-plugin-hierarchical also works. We are not planning on adding this functionality to the core library.