[charts] Can we have horizontal Gauge Chart?

[MainaMwangiy]

[charts] Can we have horizontal Gauge Chart?

[alexfauquette]

Seems like a nice to have. But I'm concerned by your example.

A gauge is assumed to show one value that can evolve into a fixed range. In your screenshot, the range is respected (from 0 to 100) but it displays 3 values.

For me this looks like a hack based on an horizontal bar chart with a special component displaying the current value.

Here is an example about how to do it

https://codesandbox.io/p/sandbox/nifty-wilbur-65mnhr?file=%2Fsrc%2FDemo.js%3A23%2C37

[alexfauquette]

It's because with composition your series need a type property such that the <BarPlot /> can know if a series is to plot or if its something else (a line seres, or any other kind of series) plus the layout: 'horizontal' needs to be moved to series too, because it make no sens to have it in the container porps (think for example about a container use to render a pie chart, or a scatter plot)

https://stackblitz.com/edit/react-w8kgna-8ihauf?file=Demo.js

[MainaMwangiy]

Thanks for this. This hack worked with my use cases.

This is link to what worked https://stackblitz.com/edit/react-zitvgz-beeo2y?file=Demo.js

However, I am now trying to achieve a responsive chart using same code and I am facing a challenge. I have tried adding ResponsiveChartContainer but my solution has not worked. https://stackblitz.com/edit/react-w8kgna-fz7kdz?file=Demo.js

Anything that I am missing?

[MainaMwangiy]

Now it works fine for all use cases. Thanks

[MainaMwangiy]

@alexfauquette Is there a way I can add a custom Tooltip to this kind of chart? https://stackblitz.com/edit/react-hrg6hu?file=Demo.js
At the moment, the Tooltip shows the values that we passed on the series but I am targeting to show the value on the indicator though. Please check on attached link.

[alexfauquette]

Yes you can. The props of the item content gives you itemData which allows to know which item is triggering the tooltip.

From props.itemData.dataIndex you can knwo which data to display. If you use axisContent slots instead of itemContent it will be props.dataIndex.

Here is the demo

https://stackblitz.com/edit/react-hrg6hu-nyfuf7?file=Demo.js