title: Creating a grouped and stacked chart in Chart.js
body: <p>I would like to know if it is possible to create a grouped and stacked chart in Chart js.</p>
  
  <p>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.</p>
  
  <p>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.  </p>
  
  <p>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. </p>
  
  <p>The code for my chart is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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,
      }]
     },
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="MyChart" width="400" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>