[xy-chart] Horizontal bar

[maximerivolet]

Hi,

I am trying to use the XYchart to do an horizontal barchart, like this one :

Do you have a working example of that ?

Regards,

[williaster]

Hey @GoldenIvan 👋 looks like you found the xychart demo on the demo site here. You can view the source code for any example below its rendering, and also follow the codesandbox link displayed on the example page to tinker live.

In general XYChart will try to infer whether you are rendering items horizontally based on your x/y scale types but you can also pass horizontal={true} as described in the docs. Here all we are doing to toggle vertical / horizontal is

• switching which config we pass as xScale vs yScale
• switching x/y accessor functions on the series

Hope that helps.

[williaster]

Quick note that looks like the code sandbox link is broken, which is due to the demo site using @visx/xychart features that are not yet published on npm. I'll try to get the 1.5.0 out soon and that should fix itself. For now you can use this link which removes the unreleased AreaStack component.

[maximerivolet]

Hi @williaster, thanks for the answer. I saw the codesandbox link. But as you said, it is currently broken. Currently, I'm picking parts of the code I try to reproduce the "BarSeries" example.

You mentionned "this link", but you forgot it, didn't you ?

I understand that you switch the x/y scale based on a boolean. But currently, I'm failing in displaying a simple XYChart, based on the examples I saw.

[williaster]

Oh snap, sorry here's the link 🤦

That demo is kind of "the whole kitchen sink," so if you're looking for a more simple example to get started you can check out this one which is linked from the /docs/xychart advanced usage examples (it is demoing a custom theme, but is a basic bar chart).

[williaster]

And here's that simple demo updated for horizontal rendering (just swapped x/yScale config + accessors).

[maximerivolet]

I was able to do that for my project. Thank you for your time !

[VigneshTrantor]

@GoldenIvan 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.