Comments (6)
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.
Related Issues (20)
- New component Barcode & QRCode & scanner HOT 1
- [pickers] DateBuilderReturnType provides wrong type with no arg HOT 3
- [data grid] Add support for async valueOptions callback HOT 1
- [pickers][DateTimePicker] page scrolls when mouse is moved outside of it when using hour/minute picker HOT 5
- [docs] Tree View: check children, uncheck parents HOT 3
- [data grid] Column resizing doesn't work from group HOT 2
- [pickers][Datepicker][AdapterDateFnsV3] unable to set single digit day of month format HOT 4
- [charts] LineChart doesn't draw graph on page load HOT 1
- [charts][LineChart] unwanted horizontal line when rendering 100 data points HOT 7
- [data grid] Improve localization dx for custom filters
- [tree view][RichTreeView] Custom styling not working HOT 8
- [data grid] Support edit functionality with server-side data source
- [data grid] Add height property, analog to Chart HOT 1
- [data grid] Upgrade v6 => v7 breaks existing styles applied HOT 2
- [data grid] GridHeaderCheckbox.js failed to compile x-data-grid after upgrading to v7 HOT 3
- [data grid] Replace ExcelJS HOT 2
- [data grid] adding a new row with the autoHeight prop causes first row flicker. HOT 8
- [data grid] The `column groups` do not appear in the data grid of my Next.js application HOT 3
- [charts] Missing documentation about how to add tooltip with composition HOT 4
- [data grid] `gridFooterElement` is `null` with `hideFooter` HOT 2
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.