[Chartjs]-How to show stacked and unstacked bar graphs together in Chart.js

by

4👍

It’s odd that your code doesn’t work, if you change the non-stacked dataSet to a line graph you see the data! Maybe worth posting an issue on the chartjs github.

But…

There was a feature released in 2.5.0 which will allow for this sort of scenario. More on what it is can be read here, https://github.com/chartjs/Chart.js/issues/2643.

Basically, you can add a new property stack on each of your dataSets to denote which stack you would like it to go on to, so for example with your data you could remove the extra scales and have 2 stacks

var config = {
  "type": "bar",
  "data": {
    "labels": ["Mar-2016","Apr-2016"],
    "datasets": [ {
      "label": "Crossville",
      "backgroundColor": "#009900",
      "data": ["2268.44","2268"],
      stack: 2,
    }, {
      "label": "test",
      "backgroundColor": "#ffff00",
      "data": ["181.92","181.92"],
      stack: 2
    },{
      "label": "benchmark",
      "type": "bar",
      "backgroundColor": "#ff3300",
      "data": ["2632.29","2632.29"],
      stack: 1
    }]
  },
  "options": {
    "scales": {
      "yAxes": [{
        "id": "stacked_testY",
        "type": 'linear',
        "position": "left",
        "stacked": true,
        "display": true
      }],
      "xAxes": [{
        "position": "bottom",
        "stacked": true,
        "display": true
      }]
    }
  }
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="chart"></canvas>
</div>

0👍

I came across this issue when trying to find out how to stack specific datasets of a line diagram in Chart.js v2.x.

Chart.js v3.x supports the stack attribute for line diagrams but in Chart.js v2.x:

  • you have to use multiple y-axis
  • to align the values you need to calculate the maximal value yourself and set ticks.max or ticks.suggestedMax in the axis configuration.

false console:

let yMax = 3000; // Calculate value beforehand.
var config = {
  "type": "line",
  "data": {
    "labels": ["Mar-2016","Apr-2016","May-2016"],
    "datasets": [ {
      "label": "Crossville",
      "backgroundColor": "#009900",
      "data": ["2268.44","2268","31"]
    }, {
      "label": "test",
      "borderColor": "#ffff00",
      "data": ["181.92","181.92", "1000"],
      "yAxis": 'A'
    },{
      "label": "benchmark",
      "backgroundColor": "#ff3300",
      "data": ["2632.29","2632.29","500"]
    }]
  },
  "options": {
    "scales": {
      "yAxes": [
        {
        "id": "A",
        ticks: {
            beginAtZero: true,
            display: true,
            suggestedMax: yMax
        },
      },
        {
        "stacked": true,
        "ticks": {
            beginAtZero: true,
            display: true, // Set this to false so that only one axis is shown!!!
            suggestedMax: yMax
        },
      },
    ],
      "xAxes": [{
        "position": "bottom",
        "stacked": true,
        "display": true
      }]
    }
  }
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="chart"></canvas>
</div>

Leave a comment