Creating a grouped and stacked chart in Chart.js

Question

I would like to know if it is possible to create a grouped and stacked chart in Chart js.

I have two sets of data and each set has a positve (income) and negative (tax) component, hence the desire to 'stack' these together. I am also presenting two cases of data - a base and sensitivity case, hence the desire to 'group' each case next to each other.

If the data is stacked along the x axis the bars overlap, if the data is not stacked then the positive (income) bars are offset from their corresponding negative (tax) bars - this toggle can be seen in the code below under the 'stacked' option.

I would like to stack the income and tax components together, as well as goup the two cases together for each year so the chart can be neatly displayed. Is this possible? Any help or insight would be greatly appreciated.

The code for my chart is as follows:

new Chart(document.getElementById("MyChart"), {
    type: 'bar',
    data: {
      labels: [2017, 2018, 2019, 2020, 2021, 2022, 2023],
      datasets: [{
          label: "Income - Base",
          type: "bar",
		  backgroundColor: "#eece01",
		  data: [30, 31, 32, 33, 34, 35, 36],
        }, {
          label: "Income - Sensitivity",
          type: "bar",
		  backgroundColor: "#f8981f",
		  data: [20, 21, 22, 23, 24, 25, 26],
        }, {
          label: "Tax - Base",
          type: "bar",
          backgroundColor: "#87d84d",
          data:  [-15, -16, -17, -18, -19, -20, -21],
        }, {
          label: "Tax - Sensitivity",
          type: "bar",
          backgroundColor: "#00b300",
          backgroundColorHover: "#3e95cd",
          data: [-10, -11, -12, -13, -14, -15, -16]
        }
      ]
    },
		options: {
			scales: {		
				xAxes: [{
				    //stacked: true,
					stacked: false,
					ticks: {
						beginAtZero:true,
						maxRotation: 0,
						minRotation: 0					
					}
				}],					
				yAxes: [{
				    stacked: false,
				}]
			},
		}
});

<canvas id="MyChart" width="400" height="200"></canvas>

Answer 1

You can stack bar charts by setting the stacked option to true on the x- and y-axis and define stack group property of your datasets.

Below is your snippet with the proposed changes:

new Chart(document.getElementById("MyChart"), {
  type: 'bar',
  data: {
    labels: [2017, 2018, 2019, 2020, 2021, 2022, 2023],
    datasets: [{
      label: "Income - Base",
      type: "bar",
      stack: "Base",
      backgroundColor: "#eece01",
      data: [30, 31, 32, 33, 34, 35, 36],
    }, {
      label: "Tax - Base",
      type: "bar",
      stack: "Base",
      backgroundColor: "#87d84d",
      data: [-15, -16, -17, -18, -19, -20, -21],
    }, {
      label: "Income - Sensitivity",
      type: "bar",
      stack: "Sensitivity",
      backgroundColor: "#f8981f",      
      data: [20, 21, 22, 23, 24, 25, 26],
    }, {
      label: "Tax - Sensitivity",
      type: "bar",
      stack: "Sensitivity",
      backgroundColor: "#00b300",
      backgroundColorHover: "#3e95cd",
      data: [-10, -11, -12, -13, -14, -15, -16]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        //stacked: true,
        stacked: true,
        ticks: {
          beginAtZero: true,
          maxRotation: 0,
          minRotation: 0
        }
      }],
      yAxes: [{
        stacked: true,
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="MyChart" width="400" height="200"></canvas>