Change color order in bar chart

1
votes

I'm using d3.scale.threshold() to achieve color change that is correlated with a value, and I'm not sure how to flip colors, so that bar chart that is completely red will be positioned on the bottom of the chart, and bar chart that is mostly green is positioned on the top.

This is my Plunker.

Right now very top bar chart is completely red and positioned at the top. However, I would like it to see it on the bottom.

Any suggestions are appreciated.

1
d3.jscharts
"Right now very top bar chart is completely red and positioned at the top."... are you sure you shared the correct plunker? - Gerardo Furtado
@GerardoFurtado Thank you so much! In the Plunker I shared, we have '166570004' positioned on top that is all red. I would like it to be positioned at the bottom. Is that possible? Thank you! - maliRudolf
I'm not seeing it "all red". Actually, they are all the same. Your data file has all the rows identical. - Gerardo Furtado
I checked it again. Maybe this one would work? - maliRudolf
Now the values are different! - Gerardo Furtado

1 Answers

1
votes

This is the sort function you want:

data.sort(function(a, b) { 
    return d3.descending(b.total, a.total); 
});

Here is your updated plunker: https://plnkr.co/edit/uyrf66RA6Qhc3bhOmdwH?p=preview