title: ChartJS 2.7.3 stacked bar chart with overlap
body: <p>I am trying to create a bar chart which has two overlapping bars and the other one would be stacked. Here's a picture of what I am trying to achieve:</p>
  <p><a href="https://i.stack.imgur.com/P2Tgd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P2Tgd.png" alt="stacked overlapping bar chart" /></a></p>
  <p>I was able to create the following based on examples I found, but the problem with the example is that e.g. in x1 the stacked bar should in value 15 because &quot;First&quot; value is 10 and &quot;Second&quot; value is 5, but now those are overlapping too.</p>
  <p>Here's a Fiddle: <a href="https://jsfiddle.net/f1ret02b/" rel="nofollow noreferrer">https://jsfiddle.net/f1ret02b/</a></p>
  <pre><code>var data = {
    labels: [&quot;x1&quot;, &quot;x2&quot;, &quot;x3&quot;],
    datasets: [{
      label: &quot;First&quot;,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderWidth: 1,
      data: [10, 20, 30],
      xAxisID: &quot;bar-x-axis1&quot;,
      //stack: 'stack 0'
    },
    {
      label: &quot;Second&quot;,
      backgroundColor: 'green',
      borderWidth: 1,
      data: [5, 7, 9],
      xAxisID: &quot;bar-x-axis1&quot;,
      //stack: 'stack 0'
  
    },
    {
      label: &quot;Third&quot;,
      backgroundColor: 'rgba(255, 206, 86, 0.2)',
      borderWidth: 1,
      data: [5, 30, 35],
      xAxisID: &quot;bar-x-axis2&quot;,
    }]
  };
  
  var options = {
    scales: {
      xAxes: [{
        stacked: true,
        id: &quot;bar-x-axis1&quot;,
        barThickness: 30,
      }, {
        display: false,
        stacked: true,
        id: &quot;bar-x-axis2&quot;,
        barThickness: 70,
        // these are needed because the bar controller defaults set only the first x axis properties
        type: 'category',
        categoryPercentage: 0.8,
        barPercentage: 0.9,
        gridLines: {
          offsetGridLines: true
        },
        offset: true
      }],
      yAxes: [
        {
        stacked: false,
        ticks: {
          beginAtZero: true
        },
      }]
  
    }
  };
  
  var ctx = document.getElementById(&quot;myChart&quot;).getContext(&quot;2d&quot;);
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
  });
  </code></pre>
  <p>Does anyone know if this is possible with chartJS?</p>