Open MainaMwangiy opened 3 months ago
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
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?
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
Now it works fine for all use cases. Thanks
@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.
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
Thanks. That worked.
Steps to reproduce
Link to live example: (required) https://mui.com/x/react-charts/gauge/#system-CompositionExample.js Steps:
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
``` 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 ```npx @mui/envinfo
Search keywords: gauge charts muix charts