Sort data in the vertical-stack in the victory stack

220 views Asked by At

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

enter image description here

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.

0

There are 0 answers