How to turn a BarStack into a BarStackHorizontal

[jimmy-e]

How do I take a BarStack and rotate it so that it is horizontal? I am currently doing something like the following, but it does not appear to be working:

import React from 'react';
import { BarStack } from '@visx/shape';

export default ({ accessor, xScale, yScale }) => (
  <BarStack<Datum, string>
    x={accessor}
    xScale={xScale}
    yScale={yScale}
  >
    ...
  </BarStack>
);

import React from 'react';
import { BarStackHorizontal } from '@visx/shape';

export default ({ accessor, xScale, yScale }) => (
  <BarStackHorizontal<Datum, string>
    y={accessor}
    xScale={yScale}
    yScale={xScale}
  >
    ...
  </BarStackHorizontal>
);

One thing that makes this less clear to find out on my own is that the gallery example for the Bar Stack (vertical) and the Bar Stack Horizontal, when analyzed in a diffchecker, are not too similiar, making it confusing as to what is the important difference between these two examples. Thanks for the help!

[VigneshTrantor]

@jimmy-e
I was able to do it by flipping the XY chart xScale and yScale values "{ type: "band" }" and "{ type: "linear" }". Just interchange them.

Also, you will need to flip the accessors
export const DATUM_ACCESSORS = (isVertical: boolean) => ({ xAccessor: (d: any) => (isVertical ? d.x : d.y), yAccessor: (d: any) => (isVertical ? d.y : d.x), });

We had a requirement to be able to flip the chart on clicking of the radio button.

Here is a codesandbox example https://codesandbox.io/s/barcharts-horizontal-v09d2?file=/Example.tsx

[jimmy-e]

Thanks @VigneshTrantor ! This seems though to apply to the XY Chart, do you know if this still applies to the BarStack and BarStackHorizontal api's for @visx/shape?

[VigneshTrantor]

I don't know for sure. Better to make separate components for horizontal and vertical charts and render them conditionally.

[maximerivolet]

Hi @jimmy-e, I already asked this here : #1050

I hope it will help you !

[jimmy-e]

Thanks! See my other response above.