[docs] Add a line chart demo for the Overview section #20239

prakhargupta1 · 2025-11-07T06:43:00Z

Source:
https://fred.stlouisfed.org/series/UNRATE
https://fred.stlouisfed.org/series/A939RC0Q052SBEA

mui-bot · 2025-11-07T06:45:04Z

Deploy preview: https://deploy-preview-20239--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/lines/lines.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against d71306d

codspeed-hq · 2025-11-07T06:55:33Z

CodSpeed Performance Report

Merging #20239 will not alter performance

_{Comparing prakhargupta1:line-demo (d71306d) with master (6ef52fd)¹}

Summary

✅ 13 untouched

No successful run was found on master (bd00b2a) during the generation of this report, so 6ef52fd was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

bernardobelchior · 2025-11-07T09:48:43Z

When zoom: brush and pan: drag are enabled and I drag using the slider the brush overlay appears. Also after zoom-in, another brush zoom is not possible as it starts to pan. Is this config not supposed to be set together?

There's an info here:

When modifying the zoom interaction configuration, care should be taken as to not create a bad user experience.
For example, the "drag" and "brush" interactions do not work well together.
If both are needed, the pointerMode and requiredKeys options described in the next sections can help.

bernardobelchior · 2025-11-11T10:06:40Z

I think we're missing a legend because it isn't clear what the green and red lines mean.

Also, should we center the title and align the source to the left?

I wonder if we want to render the labels above the content. The COVID-19 label is barely visible

prakhargupta1 · 2025-11-12T03:32:24Z

When I had to add a Legend, I had to replace <ChartContainer> with <ChartDataProvider /> and <ChartsSurface />. It makes me think what's the point of a ChartContainer at the first place? When I need to combine charts through composition, won't it be a better DX to directly go to the lowest level?

Is there any particular reason why <ChartContainer> is better than:

<ChartDataProvider >
 <ChartsSurface > ...... </ ChartsSurface >
 </ChartDataProvider >

Also, shouldn't <ChartDataProvider > be <ChartsDataProvider >? For most of the components we have 'Charts' instead of Chart. There's only three components that have Chart in the component name: ChartDataProvider, ChartContainer and ChartZoomSlider.

bernardobelchior · 2025-11-12T09:14:16Z

When I need to combine charts through composition, won't it be a better DX to directly go to the lowest level

Yeah, the container is there just to ease it a little bit, but maybe it doesn't provide enough DX improvement and it's a bit confusing.

Is there any particular reason why is better than

I guess the benefit is one less component and you don't need to know which props go to the data provider and which ones to the surface. If you look at the implementation, the container is basically only rendering the data provider and the surface.

Also, shouldn't be ? For most of the components we have 'Charts' instead of Chart. There's only three components that have Chart in the component name: ChartDataProvider, ChartContainer and ChartZoomSlider.

Yeah, I think we need to make this more homogenous. I'd be more in favor of removing the 's'. If you look at Base UI, the components are named Menu.Root, Menu.Trigger, not Menus.Root and Menus.Trigger.

@alexfauquette @JCQuintas what do you think? We could introduce the variant without the 's' now and start migrating.

JCQuintas · 2025-11-12T12:47:15Z

Yeah, I think we need to make this more homogenous. I'd be more in favor of removing the 's'. If you look at Base UI, the components are named Menu.Root, Menu.Trigger, not Menus.Root and Menus.Trigger.

IIRC @alexfauquette told me the Charts is meant to be Charts Library, similar to Pickers.

I can't find the discussion anymore, but I argued that we should move to Chart instead.

IIRC this was after the fact that I had created both the <ChartContainer> and <ChartDataProvider />, but since those were released we couldn't change much 😆

@alexfauquette @JCQuintas what do you think? We could introduce the variant without the 's' now and start migrating.

Not sure, doesn't feel super clean. Might as well just do it in one go.

bernardobelchior · 2025-11-12T13:27:12Z

Not sure, doesn't feel super clean. Might as well just do it in one go.

My point was to ease the migration rather than simplify our life. By supporting both in v8, users can migrate in the last version of v8 minimizing the number of changes they need to do in one go to upgrade to v9.

I did the migration from MUI v4 to v5 and it was painful because there were so many changes that it wasn't possible to review or split up PRs. I wouldn't want to cause that now that I'm on this side 😅

JCQuintas · 2025-11-12T13:40:19Z

docs/data/charts/lines/LineOverview.tsx

+  const xScale = useXScale();
+  const yScale = useYScale('unemployment-axis');
+  const unemploymentSeries = useLineSeries('unemployment');
+


Suggested change

const { instance } = useChartContext();

Not feasible for now since it's an internal hook

JCQuintas · 2025-11-12T13:41:54Z

docs/data/charts/lines/LineOverview.tsx

+  if (
+    x == null ||
+    y == null ||
+    x < left ||
+    x > left + width ||
+    y < top ||
+    y > top + height
+  ) {


Suggested change

if (

x == null ||

y == null ||

x < left ||

x > left + width ||

y < top ||

y > top + height

) {

if (!instance.isPointInside(x, y)) {

alexfauquette · 2025-11-17T10:53:02Z

I removed the label for unemployement pick, and simplified the data to only keep months where we have both GDP and unemployement.

My idea is: This is a demonstration. We don't need to over complicate the data

docs/data/charts/lines/lines.md

docs/data/charts/dataset/usUnempGdp.js

Co-authored-by: alex <alex.fauquette@gmail.com>

prakhargupta1 added 3 commits November 7, 2025 12:07

add

642c973

prettier

4280c83

more

e38f2e8

prakhargupta1 added docs Improvements or additions to the documentation. scope: charts Changes related to the charts. labels Nov 7, 2025

dark mode

f9757c6

prakhargupta1 added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Nov 7, 2025

prakhargupta1 marked this pull request as ready for review November 7, 2025 07:20

prakhargupta1 requested review from JCQuintas, alexfauquette and bernardobelchior as code owners November 7, 2025 07:20

prakhargupta1 added 5 commits November 10, 2025 21:19

add

c28c413

slider

abca3ff

more

30d4410

.tsx

4be9be6

pnpm docs:typescript:formatted

90c674f

from-review

44a5b8a

JCQuintas reviewed Nov 12, 2025

View reviewed changes

alexfauquette mentioned this pull request Nov 17, 2025

[charts] v9 component renaming #20353

Open

simplify the demo

5ba73f3

bernardobelchior reviewed Nov 17, 2025

View reviewed changes

docs/data/charts/lines/lines.md Show resolved Hide resolved

bernardobelchior reviewed Nov 17, 2025

View reviewed changes

docs/data/charts/dataset/usUnempGdp.js Outdated Show resolved Hide resolved

feedback

8dd6b67

bernardobelchior approved these changes Nov 17, 2025

View reviewed changes

Merge branch 'master' into line-demo

d71306d

prakhargupta1 merged commit 0835caf into mui:master Nov 26, 2025
22 checks passed

prakhargupta1 deleted the line-demo branch November 26, 2025 11:58

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Dec 14, 2025

[docs] Add a line chart demo for the Overview section (mui#20239)

eaa6cc8

Co-authored-by: alex <alex.fauquette@gmail.com>

mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025

[docs] Add a line chart demo for the Overview section (mui#20239)

cc957b2

Co-authored-by: alex <alex.fauquette@gmail.com>

Uh oh!

[docs] Add a line chart demo for the Overview section #20239

[docs] Add a line chart demo for the Overview section #20239

Uh oh!

Conversation

prakhargupta1 commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #20239 will not alter performance

Summary

Footnotes

Uh oh!

bernardobelchior commented Nov 7, 2025

Uh oh!

bernardobelchior commented Nov 11, 2025

Uh oh!

prakhargupta1 commented Nov 12, 2025

Uh oh!

bernardobelchior commented Nov 12, 2025

Uh oh!

JCQuintas commented Nov 12, 2025

Uh oh!

bernardobelchior commented Nov 12, 2025

Uh oh!

JCQuintas Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Nov 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

prakhargupta1 commented Nov 7, 2025 •

edited

Loading

mui-bot commented Nov 7, 2025 •

edited

Loading

codspeed-hq bot commented Nov 7, 2025 •

edited

Loading