How do I create stacked chart with Chart.js version 2.0.0-beta

2
votes

I've been having some trouble creating and displaying stacked Bar chart with the version above. Docs do not explain much on the topic.

Anyone has a helpful idea?

var data = {
    "labels": [
      "10/7/15", 
      "10/8/15", 
      "10/9/15", 
      "10/13/15", 
      "10/14/15", 
      "10/15/15", 
      "10/16/15"
    ],
    "datasets": [{
      "label": "Cash",
      "backgroundColor": "blue",
      "data": [
        "100000", 
        "150000", 
        "120000", 
        "140000", 
        "90000", 
        "110000", 
        "130000"
      ]
    }, {
      "label": "Credit",
      "backgroundColor": "green",
      "data": [
        "20000",
        "-10000",
        "200000",
        "-110000",
        "99500",
        "-100000",
        "11000"
      ]
    }]
  };

  var options = {
    responsive: true,
    datasetFill: false,
    scales: {
      xAxes: [{
        stacked: true,
        barPercentage: 0.8
      }]
    },
  };
  var ctx = $('#bar_chart').get(0).getContext('2d');
  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.min.js"></script>
<canvas id="bar_chart" width="470" height="200">
</canvas>

The documentation at http://nnnick.github.io/Chart.js/docs-v2/#bar-chart is indicating that "stacked: true" should be set on xAxes values, which is what I did to no effect.

1
chart.js

1 Answers

-1
votes

OK, figured it out. Looks like I need stacked: true on both axes, X and Y.