[charts] Add bar gradient example #19174

bernardobelchior · 2025-08-13T13:32:55Z

Related to #19064.

Add example with a bar gradient that reflects the bar's value:

mui-bot · 2025-08-13T13:35:15Z

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

Updated pages:

docs/data/charts/bars/bars.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%)	▼-1B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	▼-1B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	▼-1B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	▼-2B^(-0.01%)

Details of bundle changes

Generated by 🚫 dangerJS against 067a6e0

docs/data/charts/bars/bars.md

JCQuintas · 2025-08-13T13:55:26Z

docs/data/charts/bars/bars.md

+By default, a gradient's units are set to `objectBoundingBox`.
+When applied to a bar, the gradient will stretch to fill the entire size of the bar, regardless of the bar's value.
+
+Alternatively, you can set `gradientUnits` to `userSpaceOnUse`, which stretches the gradient to fill the entire size of the chart.


Would probably be nice to have a few words on how to achieve that and how to account for the legend/tooltip

how to achieve that

Sure, I'll expand on this.

how to account for the legend/tooltip

No need to account for those since they are outside the SVG. We only need to account for the axes sizes + margins. I'll explain that

Done, let me know if it's clearer or if I should rewrite it. I found it a bit hard to explain succinctly

alexfauquette · 2025-08-14T08:48:46Z

The Demo looks good except for the tooltip which looks like a flag (red yellow green is the Guinea)

Would it be possible to mix that with a continuouse colormap.

While thinking about that edge case, I'm wondering if it should not just be an additional case we support. Because for a continuous color scale we already have a gradient computed (usefull for line and scatter charts https://deploy-preview-19174--material-ui-x.netlify.app/x/react-charts/scatter/#color-scale)
An additional property to allow bar chart to fill its rectangle with the gradient instead of the computed value could do the job in a less hacky way

bernardobelchior · 2025-08-14T08:52:50Z

The Demo looks good except for the tooltip which looks like a flag (red yellow green is the Guinea)
Would it be possible to mix that with a continuouse colormap.

You mean so that the tooltip color is the same as the color in the gradient that corresponds to the bar's value?

While thinking about that edge case, I'm wondering if it should not just be an additional case we support. Because for a continuous color scale we already have a gradient computed (usefull for line and scatter charts [deploy-preview-19174--material-ui-x.netlify.app/x/react-charts/scatter#color-scale](https://deploy-preview-19174--material-ui-x.netlify.app/x/react-charts/scatter/#color-scale)) An additional property to allow bar chart to fill its rectangle with the gradient instead of the computed value could do the job in a less hacky way

So basically allowing a gradient in a continuous color map instead?
Yeah, I think that could work. I'll investigate how to do it

alexfauquette · 2025-08-14T10:53:54Z

You mean so that the tooltip color is the same as the color in the gradient that corresponds to the bar's value?

Yes, that would be more interesting to see in the tooltip that values are green or red instead of the gradient

So basically allowing a gradient in a continuous color map instead?
Yeah, I think that could work. I'll investigate how to do it

I investigated a bit. The issue is that we have two places for color management

The fixed colors are obtained from getColor() wich is defined in each seriesConfig
The gradients are rendered in a single place and we have a hook to get their ids

Charts with a mix of fix colors make their choice by picking the gradient if it exist and the getColor() result otherwise.
Here we would need to define a DX for the bar chart that let it swich to gradient when needed

github-actions · 2025-08-14T14:18:34Z

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

bernardobelchior · 2025-08-15T09:15:05Z

You mean so that the tooltip color is the same as the color in the gradient that corresponds to the bar's value?

Yes, that would be more interesting to see in the tooltip that values are green or red instead of the gradient

Yeah, makes sense. I'm not sure if it's doable in this demo, though. That would probably require our library to support it first-class.

I investigated a bit. The issue is that we have two places for color management

The fixed colors are obtained from getColor() wich is defined in each seriesConfig

The gradients are rendered in a single place and we have a hook to get their ids

Charts with a mix of fix colors make their choice by picking the gradient if it exist and the getColor() result otherwise. Here we would need to define a DX for the bar chart that let it swich to gradient when needed

Yeah, we'll need to make some changes. Do you think it still makes sense to merge this PR or should we skip it and develop gradient support?

codspeed-hq · 2025-08-16T17:37:41Z

CodSpeed Performance Report

Merging #19174 will improve performances by 8.16%

_{Comparing bernardobelchior:bar-gradient (067a6e0) with master (0e3b886)}

Summary

⚡ 1 improvements
✅ 9 untouched benchmarks

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
⚡	`ScatterChartPro with big data amount`	435 ms	402.1 ms	+8.16%

alexfauquette

Let's go with that one

alexfauquette · 2025-08-14T08:07:51Z

docs/data/charts/bars/bars.md


+### Gradients
+
+By default, a gradient's units are set to `objectBoundingBox`.


Suggested change

By default, a gradient's units are set to `objectBoundingBox`.

By default, a gradient's units are set to [`objectBoundingBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits#objectboundingbox).

docs/data/charts/bars/bars.md

alexfauquette · 2025-09-11T07:29:39Z

docs/data/charts/bars/bars.md

+
+{{"demo": "BarOECDHouseholdSavings.js"}}
+
+Note that, in the example above, we're using two separate gradients:


Suggested change

Note that, in the example above, we're using two separate gradients:

Note that, in the example above, there are two distinct gradients:

alexfauquette · 2025-09-11T07:31:51Z

docs/data/charts/bars/bars.md

+
+Note that, in the example above, we're using two separate gradients:
+
+- the series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, so this will be applied to the tooltip, legend, and other elements that reference the series color.


Suggested change

- the series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, so this will be applied to the tooltip, legend, and other elements that reference the series color.

- The series `color` property references the gradient with `gradientUnits="objectBoundingBox"`. This one is applied to the tooltip, legend, and other elements that reference the series color.

alexfauquette · 2025-09-11T07:32:12Z

docs/data/charts/bars/bars.md

+Note that, in the example above, we're using two separate gradients:
+
+- the series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, so this will be applied to the tooltip, legend, and other elements that reference the series color.
+- the bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.


Suggested change

- the bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.

- The bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.

alexfauquette · 2025-09-11T07:34:46Z

docs/data/charts/bars/bars.md

+- the series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, so this will be applied to the tooltip, legend, and other elements that reference the series color.
+- the bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.
+
+We do this because we want all elements to show the whole gradient, except the bars themselves, which should only show the part of the gradient that corresponds to their value.


Suggested change

We do this because we want all elements to show the whole gradient, except the bars themselves, which should only show the part of the gradient that corresponds to their value.

The first gradient is use for elements showing the whole gradient.

And the second one is for the bars themselves that show the part of the gradient that corresponds to their value.

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

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

bernardobelchior requested review from JCQuintas and alexfauquette August 13, 2025 13:32

JCQuintas reviewed Aug 13, 2025

View reviewed changes

bernardobelchior requested a review from JCQuintas August 14, 2025 07:53

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

bernardobelchior force-pushed the bar-gradient branch from 54aa235 to 1ebffaf Compare August 14, 2025 14:59

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

bernardobelchior force-pushed the bar-gradient branch from 1ebffaf to 7c4020f Compare August 15, 2025 15:51

oliviertassinari added the scope: charts Changes related to the charts. label Aug 16, 2025

oliviertassinari 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 Aug 16, 2025

alexfauquette approved these changes Sep 11, 2025

View reviewed changes

alexfauquette mentioned this pull request Sep 11, 2025

[charts][question] How to let bar gradient reflect actual value of the bar #19064

Open

bernardobelchior marked this pull request as ready for review September 11, 2025 08:53

bernardobelchior and others added 10 commits September 11, 2025 09:57

Add bar gradient example

8d5c62d

Fix demo

773ce84

Remove data-series

e08d9d2

Add BMI chart

618f0a9

Update demo

38b0031

Add OECD savings

ac11a97

Remove unused data

2c1c693

Remove unused demo

0a4f0e3

Update docs/data/charts/bars/bars.md

2777190

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

Update docs/data/charts/bars/bars.md

24790ac

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

bernardobelchior added 3 commits September 11, 2025 09:57

Accept suggestions

6319e7a

Update docs

32b21e4

Address PR feedback

067a6e0

bernardobelchior force-pushed the bar-gradient branch from 7c4020f to 067a6e0 Compare September 11, 2025 08:58

bernardobelchior merged commit 3b644ce into mui:master Sep 11, 2025
22 checks passed

bernardobelchior deleted the bar-gradient branch September 11, 2025 09:15

JCQuintas added a commit to JCQuintas/mui-x that referenced this pull request Sep 15, 2025

[charts] Add bar gradient example (mui#19174)

62f2b7b

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


		### Gradients

		By default, a gradient's units are set to `objectBoundingBox`.


		{{"demo": "BarOECDHouseholdSavings.js"}}

		Note that, in the example above, we're using two separate gradients:

	Note that, in the example above, we're using two separate gradients:
	Note that, in the example above, there are two distinct gradients:


		Note that, in the example above, we're using two separate gradients:

		- the series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, so this will be applied to the tooltip, legend, and other elements that reference the series color.

	- the bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.
	- The bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.

	We do this because we want all elements to show the whole gradient, except the bars themselves, which should only show the part of the gradient that corresponds to their value.
	The first gradient is use for elements showing the whole gradient.
	And the second one is for the bars themselves that show the part of the gradient that corresponds to their value.

Uh oh!

[charts] Add bar gradient example #19174

[charts] Add bar gradient example #19174

Uh oh!

Conversation

bernardobelchior commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JCQuintas Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Aug 14, 2025

Uh oh!

bernardobelchior commented Aug 14, 2025

Uh oh!

alexfauquette commented Aug 14, 2025

Uh oh!

github-actions bot commented Aug 14, 2025

Uh oh!

bernardobelchior commented Aug 15, 2025

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #19174 will improve performances by 8.16%

Summary

Benchmarks breakdown

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bernardobelchior commented Aug 13, 2025 •

edited

Loading

mui-bot commented Aug 13, 2025 •

edited

Loading

bernardobelchior Aug 13, 2025 •

edited

Loading

bernardobelchior Aug 14, 2025 •

edited

Loading

codspeed-hq bot commented Aug 16, 2025 •

edited

Loading