[charts] Can we have horizontal Gauge Chart?

[MainaMwangiy]

Steps to reproduce

Link to live example: (required)
https://mui.com/x/react-charts/gauge/#system-CompositionExample.js
Steps:

1. There is no way to change the startAngle or endAngle to be in a straight line to produce a horizontal gauge bar.
2. Tried changing the angles to 180 or -180 to be in straight line but that just makes it a complete circle.

Note: I am looking for a similar gauge that can show the value but in a straight line.

Current behavior

Currently, all the existing gauge charts are circular. I am looking for a horizontal one.

Expected behavior

I am expecting a gauge that looks like the attached image.

Context

I am trying to have a similar horizontal gauge chart that can be used to show a point with a marker for a value, but on a horizontal bar. It is currently impossible for me to get a horizontal gauge from the existing circular ones.

Your environment

npx @mui/envinfo

   System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
  Binaries:
    Node: Not Found
    npm: Not Found
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.9.3 => 11.11.1 
    @emotion/styled: ^11.9.3 => 11.11.0 
    @mui/base:  5.0.0-beta.14 
    @mui/core-downloads-tracker:  5.14.8 
    @mui/icons-material: ^5.8.4 => 5.14.8 
    @mui/lab: ^5.0.0-alpha.119 => 5.0.0-alpha.143 
    @mui/material: ^5.11.8 => 5.14.8 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-charts: ^7.4.0 => 7.4.0 
    @mui/x-data-grid:  6.5.0 
    @mui/x-data-grid-premium: 6.5.0 => 6.5.0 
    @mui/x-data-grid-pro: ^5.15.3 => 5.17.26 
    @mui/x-date-pickers:  6.12.1 
    @mui/x-date-pickers-pro: ^6.10.2 => 6.12.1 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view:  6.0.0-alpha.0 
    @types/react:  18.2.21 
    react: ^18.0.0 => 18.2.0 
    react-dom: ^18.0.0 => 18.2.0 

Search keywords: gauge charts muix charts

[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

[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?

[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]

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