Closed apedroferreira closed 10 months ago
For full-width/full-height you can use <ResponsiveChartContainer />
and do not provide a width
or a height
. It will scale to fit the parent size. This should be documented. Not sure where to put this piece of information.
About missing dots in composed line charts, it's because line charts have 3 sub-components: <AreaPlot/>
, <LinePlot/>
, and <MarkPlot/>
. The one you're looking for (adding dots) is MarkPlot
(e.g. line chart source code)
For full-width/full-height you can use
<ResponsiveChartContainer />
and do not provide awidth
or aheight
. It will scale to fit the parent size. This should be documented. Not sure where to put this piece of information.About missing dots in composed line charts, it's because line charts have 3 sub-components:
<AreaPlot/>
,<LinePlot/>
, and<MarkPlot/>
. The one you're looking for (adding dots) isMarkPlot
(e.g. line chart source code)
Thanks, those solved it!
Maybe you can mention the responsive container here after mentioning the ChartContainer
? https://mui.com/x/react-charts/
Just a possiblity.
Another possible issue, adding here not to spam too much (hopefully):
With Recharts we used to have these line charts to show number of downloads in https://github.com/mui/mui-public/tree/master/tools-public:
But I need to use a band
scale type for the line plot to show strings in the X axis, and I can't customize the number of ticks in the X-axis, which means it gets pretty crowded:
The ticks do not align either, not sure if we should do anything about that or if I should try using another type of scale.
Nevermind, the point
scale works after all.
Another issue:
Is there any way that I can customize the number of ticks shown, with the same data? I'm using a scaleType
of point
here.
tickNumber
doesn't seem to do anything.
hey @apedroferreira ticknumber works only if you have a time serie, meaning your xAxis data is an array of "Date" objects
hey @apedroferreira ticknumber works only if you have a time serie, meaning your xAxis data is an array of "Date" objects
I see, thanks for pointing that out! recharts
automatically picked only some ticks to show even if the xAxis data were strings, not sure if x-charts should do the same. From the charts we were using in our internal Toolpad applications I guess it should be useful.
Effectively, band
and point
are items for which ticknumber
has no impact. In your case, I
There are two aspects: ticks and ticks label
Effectively,
band
andpoint
are items for whichticknumber
has no impact. In your case, IThere are two aspects: ticks and ticks label
- tick label: should be fixed with the text size management. When we know how much space a tick label needs, we could display tick labels such that they do not overlap
- tick: In your example, it's not a problem. With more data points, we could whish to provide a way to display only a subset of ticks
Ok, thanks for the answer! So I guess the text fixes should solve the issue. :)
With #10648
The axis ticks should be solved since label overflow is automatically avoided
With #10648
The axis ticks should be solved since label overflow is automatically avoided
I just tried with the latest version in the PR and it looks perfect!! Thanks!
Duplicates
Latest version
Steps to reproduce 🕹
PR in Toolpad, just for context: https://github.com/mui/mui-toolpad/pull/2500
Current behavior 😯
Most of the implementation went great, just found a few issues along the way and some things that I wasn't sure how to do. Many of them might be just me missing something or lacking context, so I'm really just listing everything I thought could be worth mentioning to provide as much feedback as possible.
Expected behavior 🤔
Features
How can I make the chart full-width or even full-height? Both would be useful for Toolpad, at least full-width would be. The current height and width props seem to only take numbers.solvedI was using a combined chart with thesolved<ChartContainer />
component, and noticed that in the line charts there are no dots along the lines as there are in https://mui.com/x/react-charts/lines/. Is this intentional? Not very important and might make sense for them not to show in some cases, but just making sure.Errors
I ran into a few errors sometimes that didn't really help me towards figuring out what was wrong:
<ChartsTooltip />
component inside theChartContainer
, but if no chart is plotted, because for example the axis properties do not match the series data being passed, hovering the chart shows the errorCannot read properties of undefined (reading 'toLocaleString')
. I expected the Tooltip not to show any errors in this scenario even though no chart is being shown. Update: this is because I was usinglinear
scaleType for a line chart, and the x-axis had string values. Usingpoint
fixed it, so this isn't an issue anymore. I can try to provide a repro if you decide to look into this though.yAxis
prop toChartContainer
, we get an error that says it cannot get.scale
of undefined. This specific error seems to show in many similar cases where some chart configuration is wrong, maybe the error messages could be more useful somehow? ThisyAxis
prop is also marked as optional in the types, so maybe I did not expect it to cause an error.Minor issues
--ChartsLegend-rootSpacing
to a bigger value (25px). Not sure it could/should be more responsive either instead of just manual spacing? -> Shuld be solved by #10138Docs
'--ChartsLegend-itemMarkSize': 20px,
, for example, I guess it should be'--ChartsLegend-itemMarkSize': '20px',
? -> #10138 may lead to a new interface without CSS varsContext 🔦
None of the remaining issues are blocking, so nothing too important anymore!
Your environment 🌎
Google Chrome
Order ID or Support key 💳 (optional)
No response