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

[jvskriubakken]

The problem in depth

I want to have gradient on by bars in my bar chart. So I found this example here:
https://mui.com/x/react-charts/bars/#css

However, I want the gradient to be more than just for style - I want the gradient to present the value of the bar. Meaning, instead of the gradient to always go from red to gold, it should only go completely to gold if the value is the same as the max value. The gradient should reflect the value of the bar.

Do you think this is possible with the current functionality of BarChart? If so could you provide and example or guide me in the right direction?

Your environment

`npx @mui/envinfo`

System: OS: macOS 15.5 Binaries: Node: 22.17.0 - /usr/local/bin/node npm: 10.9.2 - /usr/local/bin/npm pnpm: 10.14.0 - /usr/local/bin/pnpm Browsers: Chrome: 138.0.7204.184 Edge: Not Found Safari: 18.5 npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/icons-material: 7.2.0 => 7.2.0 @mui/lab: 7.0.0-beta.14 => 7.0.0-beta.14 @mui/material: 7.2.0 => 7.2.0 @mui/types: 7.4.4 => 7.4.4 @mui/utils: 7.2.0 => 7.2.0 @mui/x-charts: 8.9.2 => 8.9.2 @mui/x-charts-pro: 8.9.2 => 8.9.2 @mui/x-data-grid-premium: 8.9.2 => 8.9.2 @mui/x-date-pickers-pro: 8.9.2 => 8.9.2 @mui/x-license: 8.9.2 => 8.9.2 @mui/x-tree-view: 8.9.2 => 8.9.2 @types/react: 18.3.21 => 18.3.21 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.8.3 => 5.8.3

Search keywords: Charts

Order ID: 101811

[jvskriubakken]

As I undersand it should be possible to adjust the "visible window" of the gradient between red and gold, by adjusting the offset props:

function Gradient(props: React.SVGProps<SVGLinearGradientElement>) {
  return (
    <linearGradient gradientTransform="rotate(90)" {...props}>
      <stop offset="5%" stopColor="gold" />
      <stop offset="95%" stopColor="red" />
    </linearGradient>
  );
}

so if the y-value, and min max value of the y-axis was available to the Gradient component it should have been possible?

[bernardobelchior]

Would a bar chart with a continuous color scale for the y-axis work?

If not, maybe we can work around it by using the color callback from the continuous color scale, plus a custom bar component that given a color will render the gradient differently.

[jvskriubakken]

What I request, is kind of like colorMap with continuous. However but instead of it painting the resolved color all over the bar it should paint it gradually. Kind of like it does for LineChart. This is the effect I'm after:

[bernardobelchior]

Yes, that's doable. I still need to test all the cases (e.g., negative bars), but if you only have positive bars you can adapt this demo.

The trick is updating the linearGradient to use gradientUnits="userSpaceOnUse" and set y1 to be height, in px, of the largest bar.

I hid the legend because this method doesn't work well with it. I'll try to come up with a better method and see if I can create a demo in our docs, but this approach should unblock you for now.

[jvskriubakken]

Yeah! Thanks your example is enough for me. ✌️

Agree! Good thing to put an example of this in the docs! 💪

[alexfauquette]

I hid the legend because this method doesn't work well with it. I'll try to come up with a better method and see if I can create a demo in our docs, but this approach should unblock you for now.

The easiest migth be to use 2 gradients. A relative one for tooltip and legend (passed to the color props) and a secon one with userSpaceOnUse` for the rectangles applied with

[`& .${barClasses.series}[data-series=<series-id>] .${barElementClasses.root}`]: { fill: 'url(#gradient)' },

[jvskriubakken]

I struggle to understand what I can do to make the gradient also be used/reflected in the Tooltip. Now it jus displays the colour "matching 100% of the gradient".

Is there some code from the future doc improvement that can be shared?