Back to Gallery

Stacked Grouped Bars

function App() {
  const getBarData = () => {
    return [1, 2, 3, 4, 5].map(() => {
      return [
        { x: 1, y: Math.random() },
        { x: 2, y: Math.random() },
        { x: 3, y: Math.random() }
      ];
    });
  };

  return (
    <div>
      <VictoryChart domainPadding={{ x: 50 }}>
          <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>
  );
}

render(<App/>);