[Chartjs]-Chart.js v2 – combined stacked bar chart and 2 unstacked lines

by

2👍

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👍

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}}] } }}}} />

Leave a comment