Chartjs v2.0: stacked bar chart

chart.js

I need to get a chart like this:

Example Chart

I find this example but it uses old version of ChartJs. I try it using v2.0 but I don't get it.

Can someone post a example?

Best Answer

With v2.1.x, you can achieve this using the stacked option

...
options: {
    scales:{
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
        stacked: true
        }]
    }
}
...

Stack Snippet

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 2',
      data: [-65, -10, -80, -81, -56, -85, 40],
      borderColor: 'black',
      fill: false
    }, {
      type: 'bar',
      label: 'Dataset 1',
      backgroundColor: "red",
      data: [65, 0, 80, 81, 56, 85, 40],
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: "blue",
      data: [-65, 0, -80, -81, -56, -85, -40]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Related Topic