ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] Stacked bar chart - each stack isn't ordered
I have this data for example: (It is ordered by 'siteName' and 'impact')
0: {impact: 8, count: 11, siteName: 'Pinkelectric', sum: 48}
1: {impact: 7, count: 14, siteName: 'Pinkelectric', sum: 48}
2: {impact: 5, count: 5, siteName: 'Pinkelectric', sum: 48}
3: {impact: 2, count: 18, siteName: 'Pinkelectric', sum: 48}
4: {impact: 9, count: 1, siteName: 'Yellowbook', sum: 44}
5: {impact: 8, count: 2, siteName: 'Yellowbook', sum: 44}
6: {impact: 6, count: 16, siteName: 'Yellowbook', sum: 44}
7: {impact: 3, count: 25, siteName: 'Yellowbook', sum: 44}
8: {impact: 9, count: 3, siteName: 'PC man', sum: 37}
9: {impact: 7, count: 14, siteName: 'PC man', sum: 37}
10: {impact: 5, count: 4, siteName: 'PC man', sum: 37}
11: {impact: 2, count: 16, siteName: 'PC man', sum: 37}
12: {impact: 9, count: 1, siteName: 'Green Hill', sum: 31}
13: {impact: 7, count: 12, siteName: 'Green Hill', sum: 31}
14: {impact: 3, count: 3, siteName: 'Green Hill', sum: 31}
15: {impact: 1, count: 15, siteName: 'Green Hill', sum: 31}
16: {impact: 6, count: 1, siteName: 'Hills', sum: 24}
17: {impact: 4, count: 14, siteName: 'Hills', sum: 24}
18: {impact: 2, count: 9, siteName: 'Hills', sum: 24}
The chart looks like this:
Impact 9 is darkest, impact 0 is lightest - as you can see the order of some of the stacks doesn't match the data I'm providing
Example: (7,9,3,1 should be 9,7,3,1)
Is there a way to change the order of each individual stack? (I'd want it in DESC order from left to right, by impact) Config:
const chartConfig = {
data: alertsBy,
isStack: true,
xField: 'count',
yField: 'siteName',
seriesField: 'impact',
colorField: 'impact',
color: ({impact}) => {
return Constants.ImpactColors[Math.floor(impact)];
},
legend: false,
xAxis: {
label: {
formatter: () => {
return null
}
},
grid: {
line: {
style: {
lineWidth: 0,
strokeOpacity: 0,
}
}
}
},
yAxis: {
label: {
formatter: () => {
return null
}
},
line: {
style: {
lineWidth: 0,
strokeOpacity: 0,
}
},
tickLine: {
length: 0
}
},
});