Chartjs - Stacked bar chart data order causes invisible other values

Question

Ive seen this thread: Chartjs - Stacked bar chart blocking other values

But still its not what im looking for. As author of previous thread pointed

My problem is that chart js is rendering the bar chart based on the order defined on the dataset. As you can see below, the values at index 0 of the arrays are 2500 and 1000. Since the 2500 was passed first, this will block the bar chart of the 1000 value. https://jsfiddle.net/6bjy9nxh/352/

labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
datasets: [
    {
        label: '2010 customers #',
        fillColor: '#382765',
        data: [2500, 1902, 1041, 610, 1245, 952]
    },
    {
        label: '2014 customers #',
        fillColor: '#7BC225',
        data: [1000, 1689, 1318, 589, 1199, 1436]
    }
]

As my data is dynamic i dont know what value is higher thus i cant make order static.

Current behaviour if bigger data is passed as first: Current behaviour

Expected behaviour:

Expected behaviour

Why im not accepting answer from previous thread? Because it sums values on Y axis: answer from other thread

you can define rendering order per dataset so that small values get rendered on top bigger ones. but you cant define rendering order per data point. — sandeep joshi
yes so it wont solve my problem as its not said that first datasets is the biggest one for each X axis value — Klaudiusz Duda

Rohan B Rohan B · Accepted Answer · 2020-09-22T09:42:50

Perhap you could give each of your dynamic datapoints an index, and then use css z-index to change the order of each individual index?

It seems like you can add custom properties to data in ChartJS. (I've not used it before but I've done something similar using Chartist)

Chartjs - Stacked bar chart data order causes invisible other values

1 Answers