1

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

2
  • 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. Sep 22, 2020 at 10:51
  • yes so it wont solve my problem as its not said that first datasets is the biggest one for each X axis value Sep 22, 2020 at 12:04

1 Answer 1

-1

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.