Chart.js v2 - combined stacked bar chart and 2 unstacked lines

2
votes

Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?

Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.

jsfiddle example.

Below is the code for reference.

        // set default no fill beneath the line
        Chart.defaults.global.elements.line.fill = false;


        // stacked bar with 2 unstacked lines - nope
        var barChartData = {
          labels: ['2016', '2017', '2018', '2019'],
          datasets: [{
            type: 'bar',
            label: 'a',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(217,83,79,0.75)",
            data: [1000, 2000, 4000, 5000]
          }, {
            type: 'bar',
            label: 'b',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(92,184,92,0.75)",
            data: [500, 600, 700, 800]
          }, {
            type: 'line',
            label: 'c',
            yAxisID: "y-axis-0",
            backgroundColor: "rgba(51,51,51,0.5)",
            data: [1500, 2600, 4700, 5800]
          }, {
            type: 'line',
            label: 'd',
            yAxisID: "y-axis-1",
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [5000, 3000, 1000, 0]
          }]
        };


        var ctx = document.getElementById("chart").getContext("2d");
        // allocate and initialize a chart
        var ch = new Chart(ctx, {
          type: 'bar',
          data: barChartData,
          options: {
            title: {
              display: true,
              text: "Chart.js Bar Chart - Stacked"
            },
            tooltips: {
              mode: 'label'
            },
            responsive: true,
            scales: {
              xAxes: [{
                stacked: true
              }],
              yAxes: [{
                stacked: true,
                position: "left",
                id: "y-axis-0",
              }, {
                stacked: false,
                position: "right",
                id: "y-axis-1",
              }]
            }
          }
        });
2
javascriptchartschart.jschart.js2

2 Answers

1
votes

Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:

ticks: {
   beginAtZero: true,
   suggestedMax: 5800
}

Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.

As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.

0
votes

Use this as the data for the graph:

var barData = {
                labels: ['test1','test2'],
                datasets: [
                    {
                        label: 'stack1',
                        backgroundColor: 'yellow',
                        borderColor: 'white',
                        borderWidth: 1,
                        stack: '1',
                        data: [5,4,3,2,1]
                      },
                      {
                        label: 'stack2',
                        backgroundColor: 'blue',
                        borderColor: 'white',
                        borderWidth: 1,
                        stack: '2',
                        data: [1,2,3,4,5]
                      }
                ]
            };

This is the component to render the data:

<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />