Comments (7)
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
from mui-x.
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
from mui-x.
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?
from mui-x.
Now it works fine for all use cases. Thanks
from mui-x.
@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.
from mui-x.
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
from mui-x.
Thanks. That worked.
from mui-x.
Related Issues (20)
- [data grid] How to autosize and header filters work well? HOT 2
- [pickers] Change of locale adapter import for moment.js HOT 1
- [pickers] Date Calendar like an actual Outlook-ish calendar HOT 4
- [data grid] Possibility to save changes in data grid, like column sorting, hiding ordering HOT 2
- [pickers] Translating page in Edge make calendar show March when not March HOT 5
- [data grid] tests fail when calling setCellFocus HOT 1
- [docs] Recommended Pickers styling approach shown on all styling approaches HOT 3
- [pickers] MUI DateRangePicker property "name" doesnt render HOT 3
- [charts][RFC] Replace `DefaultXxxx` by the usage of hooks
- [charts] Remove deprecated props HOT 1
- [data grid] Cell stealing focus from modal and onClicks for buttons rendered inside cells fire when the user hits the enter key HOT 3
- Create PDF component HOT 7
- [data grid] is there anyway to avoid copy paste functionality from one column to another? HOT 11
- [tree view][TreeItem] Add support for `href` attribute HOT 5
- [data grid] Check the grouped child rows on select of the grouped row HOT 3
- [data grid] Resizing columns gets misaligned HOT 1
- [charts] Get access to the data outside of the SVG
- [charts] Document the usage of foreingObject
- [fields][DateField] on Android: using DateField on firefox doesn't work HOT 4
- [data grid] Impact of not renewing license for small changes and bug fixes HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.