ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🐛[BUG] Stacked bar chart - each stack isn't ordered

Open knobelman opened this issue 2 years ago • 0 comments

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: image 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) image

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
			}
		},
	});

knobelman avatar Jul 28 '22 10:07 knobelman