[charts][POC] Charts #20361

JCQuintas · 2025-11-17T15:44:40Z

I have followed (at least) the PR section of the contributing guide.

…t-base

alexfauquette · 2025-11-18T16:30:29Z

docs/data/charts/composition/PocBaseAndMaterial.tsx

+      <PieChartBase.Root {...data}>
+        <PieChartBase.Surface>


I'm not sure about calling them PieChartBase.Root and PieChartBase.Surface

Mostly because we would end up with a mix of line and bar when using composition

<LineChart.Root> <LineChart.Surface> <LineChart.LinePlot /> <BarChart.BarPlot /> </LineChart.Surface> </LineChart.Root>

Maybe something more like that

<CommonChart.Root> <CommonChart.Surface> <Cartesian.Grid /> <LineChart.LinePlot /> <BarChart.BarPlot /> <Cartesian.XAxis /> <Cartesian.YAxis /> </CommonChart.Surface> </CommonChart.Root>

it's maybe just because I'm not used to it, but passing everything to something called Root feel weird

alexfauquette · 2025-11-18T16:41:43Z

docs/data/charts/composition/PocBaseAndMaterial.tsx

+      <PieChartBase.Root {...data}>
+        <PieChartBase.Surface>


Not sure about naming every thing with PieChartBase

Mostly because the container and the surface can be shared between charts.

Having dedicated namings for common aspect feels more natural

<Common.Root> <Common.Surface> <Cartesian.Grid /> <LineChart.LinePlot /> <BarChart.BarPlot /> <Cartesian.XAxis /> <Cartesian.YAxis /> </Common.Surface> </Common.Root>

Maybe it's just me who gets too old, but Root does nto seems trivial to know if it's just a provider or a dom elements that does something

alexfauquette

Nice PoC. The style seems to work nice. Fro the darck/light theme I assume we can use CSS selectorsto override CSS vars. The only interogation I still have is the left-to-right / RTL display. But I've seen base-ui have a new utils for that

mnajdova · 2025-11-19T09:17:49Z

docs/data/charts/composition/composition.md

+
+This example demonstrates the proposed architecture where charts functionality is split into two packages:
+
+- **@mui/x-charts-base**: Framework-agnostic core with inline styles and a custom theme system


We shouldn't have any theme system in the headless part, it should come from the styled layer

mnajdova · 2025-11-19T09:17:53Z

docs/data/charts/composition/composition.md

+This example demonstrates the proposed architecture where charts functionality is split into two packages:
+
+- **@mui/x-charts-base**: Framework-agnostic core with inline styles and a custom theme system
+- **@mui/x-charts-material**: Material UI integration layer using material components and theming


Alongside the Material UI version, it would be nice to build a Plain CSS demo of the same component to see if we are not by any chance leaking any Material UI concepts in the headless pat.

mnajdova · 2025-11-19T09:29:12Z

packages/x-charts-base/src/FakeCss/index.ts

+    height: 'var(--chart-surface-height, 100%)',
+    width: 'var(--chart-surface-width, 100%)',


We should just provide the CSS variabels values in the style tag this is how those should be consumed.

mnajdova · 2025-11-19T09:29:25Z

packages/x-charts-base/src/FakeCss/index.ts

+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',


This should be in the styled layer.

mnajdova · 2025-11-19T09:30:00Z

packages/x-charts-base/src/FakeCss/index.ts

+    touchAction: 'pan-y',
+    userSelect: 'none',
+    gridArea: 'chart',


If these are functional styles that we should always have they should be directly set on the element via the style tag. If not, it's enough to have them in a demo.

mnajdova · 2025-11-19T09:31:40Z

packages/x-charts-base/src/FakeCss/index.ts

+    gridArea: 'chart',
+  },
+
+  '& .ChartsSurface-root:focus': {


Everything from here to the bottom should go in the styled layer/demo. Also make sure that all these elements are accessible on the styled layer, e.g. either as a component or something the user has to render.

mnajdova · 2025-11-19T09:32:06Z

packages/x-charts-base/src/FakeCss/index.ts

+    '--PieChart-arc-stroke': 'black',
+  }),
+
+  '--FocusIndicator-color': 'var(--Primary-color)',


No theme leaks, e.g. non Material UI libraries may not even have this CSS var, or it could look differently.

mnajdova · 2025-11-19T10:20:12Z

packages/x-charts-base/src/PieChart/PieChart.tsx

+
+  return (
+    <ChartDataProvider<'pie', PieChartPluginSignatures> {...chartDataProviderProps}>
+      <FakeCss>{children}</FakeCss>


As mentioned, remove FakeCss, and use the code in the demo directly, then we will see if there are some things that are worth extracting here. You can also duplicate this in Material UI.

mnajdova · 2025-11-19T10:20:57Z

packages/x-charts-base/src/PieChart/PieChart.tsx

+  );
+});
+
+// We could use `ChartsSurface` directly, but I think we could propose a different pattern, like if you want a single chart, then


It would be much more clear if we rename these files to contain the part name, and split the different components into different files.

mnajdova · 2025-11-19T10:25:11Z

packages/x-charts-base/src/PieChart/PieArcPlot.tsx

+  return (
+    <g {...other}>
+      {transformedData.map((item, index) => (
+        <PieArc


We should discuss how people would be able to customize these elements, as well as the focus indicator element. Should this be maybe a children callback that useres can use to render directly their own PieArc elements?

mnajdova · 2025-11-19T10:26:09Z

packages/x-charts-base/src/FakeCss/index.ts

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material';
+
+export const FakeCss = styled('div')(({ theme }) => ({


Is this the only CSS we need? If yes, it's great! :)

mnajdova · 2025-11-19T10:26:45Z

packages/x-charts-material/src/FakeCss/index.ts

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material';
+
+export const FakeCss = styled('div')(({ theme }) => ({


Can't we just wrap the PieChart.Root component and provide all the styles here? Why FakeCSS? This is Material UI package, no?

JCQuintas added 17 commits November 13, 2025 21:35

scaffolding

447e623

poc start

c949717

material

07ab055

try remove creator

8a9c79b

memoized

0eb3908

force return type

2c447de

rename

da31c1d

Merge branch 'master' into try-remove-creator

9a1e233

0d7a18c

Merge branch 'master' into try-remove-creator

66637d0

Merge commit '66637d0fe2d6e187dfa665355aebb73e631a7d09' into poc-char…

06365cc

…t-base

parts

f339c25

material impl

17d7523

Merge commit 'ee5f69d4707416b1404e9f23f3f4de623def9688' into poc-char…

c20dbc3

…t-base

Merge commit '9823b20240dee433d46a0ff5e47be44842af9d78' into poc-char…

92870d3

…t-base

remove

dd7b3e9

remove

80c8772

JCQuintas self-assigned this Nov 17, 2025

JCQuintas added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Nov 17, 2025

alexfauquette reviewed Nov 18, 2025

View reviewed changes

mnajdova reviewed Nov 19, 2025

View reviewed changes


		This example demonstrates the proposed architecture where charts functionality is split into two packages:

		- @mui/x-charts-base: Framework-agnostic core with inline styles and a custom theme system

		height: 'var(--chart-surface-height, 100%)',
		width: 'var(--chart-surface-width, 100%)',

		@@ -0,0 +1,49 @@
		import { styled } from '@mui/material';

		export const FakeCss = styled('div')(({ theme }) => ({

		@@ -0,0 +1,9 @@
		import { styled } from '@mui/material';

		export const FakeCss = styled('div')(({ theme }) => ({

Uh oh!

[charts][POC] Charts #20361

Are you sure you want to change the base?

[charts][POC] Charts #20361

Conversation

JCQuintas commented Nov 17, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants