Is there any way, through which the data can be sorted in the vertical bar, in which the biggest value (y-axis) ends up at the bottom?
Here is my code
class App extends React.Component {
render() {
const getBarData = () => {
return [1, 2,3,4].map((k) => {
return [
{ x: 1, y: k*20 },
{ x: 2, y: k*30 },
{ x: 3, y: k*10 },
];
});
};
return (
<div>
<VictoryChart domainPadding={{ x: 50 }} width={400} height={400}>
<VictoryGroup offset={20} style={{ data: { width: 15 } }}>
<VictoryStack colorScale={"red"}>
{getBarData().map((data, index) => {
return <VictoryBar key={index} data={data}/>;
})}
</VictoryStack>
<VictoryStack colorScale={"green"}>
{getBarData().map((data, index) => {
return <VictoryBar key={index} data={data}/>;
})}
</VictoryStack>
<VictoryStack colorScale={"blue"}>
{getBarData().map((data, index) => {
return <VictoryBar key={index} data={data}/>;
})}
</VictoryStack>
</VictoryGroup>
</VictoryChart>
</div>
);
}
}
ReactDOM.render(<App/>, mountNode);
I have used the victory stack and victory group with the victory bar, but when I am using the sortKey and sortOrder inside the Victory bar, the graph is sorted horizontally not vertically.