[charts] Add series color callback #20084

bernardobelchior · 2025-10-24T14:12:38Z

Add series colorGetter prop with a (data: { value: TValue, dataIndex: number}) => string signature.

Demo:

mui-bot · 2025-10-24T14:14:30Z

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

Updated pages:

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+117B^(+0.03%)	🔺+29B^(+0.02%)
@mui/x-data-grid-pro	🔺+117B^(+0.02%)	🔺+31B^(+0.02%)
@mui/x-data-grid-premium	🔺+117B^(+0.02%)	🔺+28B^(+0.01%)
@mui/x-charts	🔺+750B^(+0.22%)	🔺+156B^(+0.15%)
@mui/x-charts-pro	🔺+748B^(+0.17%)	🔺+101B^(+0.08%)
@mui/x-charts-premium	🔺+750B^(+0.17%)	🔺+151B^(+0.11%)
@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	🔺+39B^(+0.06%)	▼-3B^(-0.01%)
@mui/x-tree-view-pro	🔺+39B^(+0.04%)	🔺+2B^(+0.01%)

Details of bundle changes

Generated by 🚫 dangerJS against 22423c6

bernardobelchior · 2025-10-24T14:15:35Z

packages/x-charts/src/ScatterChart/Scatter.tsx

  xScale: D3Scale;
  yScale: D3Scale;
+  /**
+   * @deprecated Use `colorGetter` instead.


The color can be obtained by calling colorGetter(), so this color is redundant. That was my logic for deprecating this. Let me know what you think.

It feels a bit weird because all the series now have color that support a callback, and scatter get its color deprecated in favor of the colorGetter

codspeed-hq · 2025-10-24T15:24:00Z

CodSpeed Performance Report

Merging #20084 will not alter performance

_{Comparing bernardobelchior:add-series-color-callback (22423c6) with master (7e864cf)}

Summary

✅ 13 untouched

packages/x-charts/src/models/seriesType/common.ts

bernardobelchior · 2025-10-29T10:51:44Z

packages/x-charts/src/ScatterChart/ScatterPlot.tsx

      {seriesOrder.map((seriesId) => {
        const { id, xAxisId, yAxisId, zAxisId, color } = series[seriesId];

+        // FIXME: V9: remove this cast as it will no longer be necessary


Added an action item in tasks for v9 to remove these fixmes

github-actions · 2025-10-29T13:14:18Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2025-10-30T09:00:21Z

packages/x-charts/src/ScatterChart/Scatter.tsx

  xScale: D3Scale;
  yScale: D3Scale;
+  /**
+   * @deprecated Use `colorGetter` instead.


It feels a bit weird because all the series now have color that support a callback, and scatter get its color deprecated in favor of the colorGetter

alexfauquette · 2025-10-30T09:04:35Z

docs/data/charts/components/SeriesDemo.js

+        color={
+          typeof series.color === 'function'
+            ? series.color({ value: min.value, dataIndex: min.index })
+            : series.color
+        }


From a user perspective this feel paintfull. 99% of the time color is just a string. Having to do edge case for the function option is not optimal.

What about getting the colorGetter and at the same place we defaultise the color according to the colorPalette, we add a logic saying "if colorGetter is deined, I do color = colorGetter(null)"

That way people that don't care about callback can ignore this option. and those who care can simply do color={series.collorGetter?.(value) ?? series.color}

From a user perspective this feel paintfull

Yeah, I kind of agree. We can expose colorGetter and color is the result of colorGetter(null), i.e., a default color for the series.

So what you're saying is that a series will accept a colorGetter prop that has priority over color, right?

So what you're saying is that a series will accept a colorGetter prop that has priority over color, right?

Yes, at least that what I though while reading the PR. Maybe there is a better tradeof

Updated, let me know what you think 😄

bernardobelchior · 2025-10-30T14:33:34Z

docs/data/charts/styling/ColorCallback.js

+  series: [
+    {
+      data: netSpendInPounds,
+      colorGetter: (data) => clubColors[data.dataIndex],


Should we call it getColor instead of colorGetter? Or getDataPointColor?

colorGetter has the advantage that when you search for color you find it just after in the API page or the autocomplet. But I agree getColor feels more natural

Yeah, that was my conclusion as well.

@JCQuintas any input? If not, I'd rather stick with colorGetter as I value the discoverability more

alexfauquette · 2025-10-30T15:16:44Z

packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx

+        const { seriesId, points, color, hideMark, fillArea } = series;
+        const getColor = getSeriesColorFn(series);


Should we put that in the useRadarSeriesData() to avoid having some computation in the hook and others on the component

alexfauquette · 2025-10-30T15:24:17Z

docs/data/charts/styling/ColorCallback.js

+  series: [
+    {
+      data: netSpendInPounds,
+      colorGetter: (data) => clubColors[data.dataIndex],


colorGetter has the advantage that when you search for color you find it just after in the API page or the autocomplet. But I agree getColor feels more natural

github-actions · 2025-10-30T16:33:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

JCQuintas

Shouldn't this also extend to pro packages?

docs/data/charts/styling/styling.md

packages/x-charts/src/models/seriesType/common.ts

Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Bernardo Belchior <[email protected]>

bernardobelchior · 2025-11-03T15:14:59Z

Shouldn't this also extend to pro packages?

Do you mean that I forgot to update the pro series types? Yeah, I did 😅 on it

bernardobelchior · 2025-11-03T15:37:42Z

Actually, all pro charts omit the color prop, so we don't need to implement colorGetter.

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…ui#19851) Signed-off-by: Michel Engelen <[email protected]> Signed-off-by: Gene Arch <[email protected]> Co-authored-by: Michel Engelen <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: Gene Arch <[email protected]> Co-authored-by: Rom Grk <[email protected]>

…ctionsCellItem) (mui#19513) Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: michelengelen <[email protected]>

mui#20088)

… event parts (mui#20175)

…ui#20081)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…ui#20182)

…nnel

JCQuintas · 2025-11-03T15:51:03Z

Actually, all pro charts omit the color prop, so we don't need to implement colorGetter.

But shouldn't it be implemented for them? Like, the funnel chart has a similar color setting as the pie chart. The sankey is completely custom, but it could, technically, benefit from a colorGetter

We can do it in a followup though if you agree

bernardobelchior · 2025-11-03T15:56:14Z

Yeah, I'll do that as a follow-up 👍

bernardobelchior 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 Oct 24, 2025

bernardobelchior commented Oct 24, 2025

View reviewed changes

bernardobelchior changed the title ~~Add series color callback~~ [charts] Add series color callback Oct 24, 2025

bernardobelchior commented Oct 24, 2025

View reviewed changes

packages/x-charts/src/models/seriesType/common.ts Outdated Show resolved Hide resolved

bernardobelchior force-pushed the add-series-color-callback branch from e5711c8 to 61ed9e5 Compare October 29, 2025 09:59

bernardobelchior commented Oct 29, 2025

View reviewed changes

bernardobelchior force-pushed the add-series-color-callback branch from a06ce47 to e3de132 Compare October 29, 2025 11:00

bernardobelchior marked this pull request as ready for review October 29, 2025 12:50

bernardobelchior requested review from alexfauquette and prakhargupta1 as code owners October 29, 2025 12:50

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 29, 2025

bernardobelchior force-pushed the add-series-color-callback branch from f177611 to 43f4e87 Compare October 29, 2025 14:43

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 29, 2025

alexfauquette reviewed Oct 30, 2025

View reviewed changes

bernardobelchior force-pushed the add-series-color-callback branch from ea1d740 to 5dc7e1b Compare October 30, 2025 14:32

bernardobelchior commented Oct 30, 2025

View reviewed changes

alexfauquette reviewed Oct 30, 2025

View reviewed changes

bernardobelchior requested review from JCQuintas and alexfauquette October 30, 2025 15:37

bernardobelchior force-pushed the add-series-color-callback branch from 509d888 to 808f940 Compare October 30, 2025 15:38

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2025

bernardobelchior force-pushed the add-series-color-callback branch from 808f940 to 7173e06 Compare October 30, 2025 16:41

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2025

bernardobelchior mentioned this pull request Oct 31, 2025

[charts] WIP: Bar range poc #20033

Draft

1 task

[charts] Add series color callback

1a0804f

bernardobelchior added 2 commits October 31, 2025 17:20

Remove unused var

a7b4223

Address feedback

1ba3a9f

bernardobelchior force-pushed the add-series-color-callback branch from 7173e06 to 1ba3a9f Compare October 31, 2025 17:20

JCQuintas reviewed Nov 3, 2025

View reviewed changes

docs/data/charts/styling/styling.md Outdated Show resolved Hide resolved

packages/x-charts/src/models/seriesType/common.ts Outdated Show resolved Hide resolved

Update docs/data/charts/styling/styling.md

6edd7e1

Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Bernardo Belchior <[email protected]>

renovate bot and others added 17 commits November 3, 2025 15:40

Bump lucide-react to ^0.548.0 (mui#20174)

3db3f50

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump @octokit/plugin-retry to ^8.0.3 (mui#20172)

1119a40

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump react-router to ^7.9.5 (mui#20171)

59f963f

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump es-toolkit to ^1.41.0 (mui#20169)

b405c03

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump eslint-plugin-jsdoc to ^61.1.11 (mui#20170)

760339c

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump @types/node to ^22.18.13 (mui#20168)

7ae8829

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump @mui/monorepo digest to 035815b (mui#20166)

c5cd354

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump GitHub Actions (mui#20173)

f457cf5

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

[code-infra] git-ignore next-env.d.ts (mui#20177)

7ca4ac9

[data grid] Stop event propagation on data grid action buttons (GridA…

e21946b

…ctionsCellItem) (mui#19513) Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: michelengelen <[email protected]>

[scheduler] Improve the drag and drop utils to support resource change (

309173a

mui#20088)

[scheduler] Fix the isDragging and isResizing state properties on…

93e19a7

… event parts (mui#20175)

[scheduler] Testing - event builders for reducing test boilerplate (m…

8bd08cf

…ui#20081)

Bump @mui/x-internal-exceljs-fork to ^4.4.2 (mui#20167)

e861be9

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

[charts] Fix chart cut off when inside overflow: scroll container (m…

1a8338c

…ui#20182)

Rename ColorCallbackValue. Remove colorGetter from heatmap and fu…

22423c6

…nnel

JCQuintas approved these changes Nov 3, 2025

View reviewed changes

bernardobelchior mentioned this pull request Nov 3, 2025

[charts] Implement color callback for remaining chart types #20183

Open

bernardobelchior merged commit 30592e8 into mui:master Nov 3, 2025
22 checks passed

bernardobelchior deleted the add-series-color-callback branch November 3, 2025 15:58

		const { seriesId, points, color, hideMark, fillArea } = series;
		const getColor = getSeriesColorFn(series);

Uh oh!

[charts] Add series color callback #20084

[charts] Add series color callback #20084

Uh oh!

Conversation

bernardobelchior commented Oct 24, 2025 • edited by JCQuintas Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Merging #20084 will not alter performance

Summary

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 29, 2025

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!

github-actions bot commented Oct 30, 2025

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bernardobelchior commented Nov 3, 2025

Uh oh!

bernardobelchior commented Nov 3, 2025

Uh oh!

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

Uh oh!

Uh oh!

bernardobelchior commented Nov 3, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

bernardobelchior commented Oct 24, 2025 •

edited by JCQuintas

Loading

mui-bot commented Oct 24, 2025 •

edited

Loading

codspeed-hq bot commented Oct 24, 2025 •

edited

Loading

JCQuintas commented Nov 3, 2025 •

edited

Loading