title: Vertical stacked bar chart with chart.js
body: <p>Excellent and free library from <a href="http://www.chartjs.org/" rel="noreferrer">chart.js</a>. I'm transferring my charts from Google charts to chart.js, because I can use them offline and it seems more responsive to window's changes of size. Furthermore I realised that my viewers in China could not see my Google charts because Google services are blocked in China.</p>
  
  <p>I've been reading the documentation regarding <a href="http://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart" rel="noreferrer">stacked vertical bar charts</a>, but I can't figure out, how to make a chart like this. In all examples I saw for stacked bar charts, the number of items is the same for each bar. </p>
  
  <p>Can I make only two vertical stacked datasets? It's because the right bar has more items than the left one. Or do I need <code>n</code> datasets, being <code>n</code> the number of items, of the bar which has more items?</p>
  
  <p><a href="https://i.stack.imgur.com/4wW0K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4wW0K.png" alt="enter image description here"></a></p>
  
  <h2>Code</h2>
  
  <p>I want to group one dataset per (stacked) bar, but I can't.</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>var ctx = document.getElementById("barChart").getContext('2d');
      
  var labels = ["standing costs", "running costs"];
  var dataset = [ 
                  {
                    type: 'bar',
                    label: ["cost1", "cost2", "cost3", "cost4"],
                    data: [1, 2, 1, 3],                       
                    stack: "standing costs",
                    backgroundColor: [
                        'navy',
                        'blue',
                        'aqua',
                        'teal'
                    ]
                  },
                  {
                    type: 'bar',
                    label: ["cost5", "cost6", "cost7", "cost8"],
                    data: [5, 1, 3, 0],                       
                    stack: "running costs",
                    backgroundColor: [                         
                        'green',
                        'lime',
                        'yellow',
                        'white'
                    ]
                  }
              ];
  
  var options = {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
  };
  
  var content = {
      type: 'bar',
      data: {
          labels: labels,
          datasets: dataset
      },
      options
  };
  
  new Chart(ctx, content);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://cdnjs.cloudflare.com/ajax/libs/colors/1.0/colors.min.css");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="barChart"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>