[charts] Show reference colors in the gauge chart

[josh-thompson13]

The problem in depth

I need a way to color my gauge. See the attached image, the gauge on the right. Is it possible to do something like this? With multiple colors.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Benchmarks

• Public: https://mui-org.notion.site/mui-x-Gauge-104cbfe7b66080378f88dfd35fafb807
• Editable: https://www.notion.so/mui-org/mui-x-Gauge-104cbfe7b66080378f88dfd35fafb807

Search keywords: Gauge colors
Order ID:

[josh-thompson13]

To add to this, I know I'm able to change the referenceArc color, so I'm wondering if I can conditionally set a fill color based on the position of the value arc? E.g. if arc is positioned between 75 - 100 fill with red.

 <Gauge
    value={value}
    startAngle={atrStartAngle}
    endAngle={atrEndAngle}
    text={() => (atrHideValue ? "" : `${atrPrefix ?? ""}${value}${atrSuffix ?? ""}`)}
    valueMax={atrMaxValue}
    valueMin={atrMinValue}
    sx={() => ({
        [`& .${gaugeClasses.valueText}`]: {
            fontSize: asNumber(atrFontSize).$or(() => undefined) ?? 12,
            transform: `translate(0px, ${atrRepositionValue ?? "0"}%)`,
        },
        [`.MuiGauge-referenceArc`]: {
            // Set conditional fill color based on arc location.
            fill: "red",
        },
    })}
    height={atrHeight}
/>

[alexfauquette]

I'm not sure about what you want to create

I'm wondering if I can conditionally set a fill color based on the position of the value arc

Yes, the code you provided is good. You just need to replace the fill: "red", by something conditional to the value

https://codesandbox.io/p/sandbox/fragrant-microservice-zhnk9c?file=%2Fsrc%2FDemo.tsx%3A6%2C17

If you want to show the entire color mapping, it's not yet feasible. For the we would need to add the new colorMap threshold in the Gauge.

I was hopping to do it with some gradients, but unfortunately the conic gradients are not yet available with SVG

[JCQuintas]

@alexfauquette we can always try with a foreignObject 😅

[josh-thompson13]

I'm not sure about what you want to create

I want to create a gauge similar to the one on the right hand side of the image I provided in my first comment. Essentially to show multiple colours in the reference arc. But I'm not sure it's quite possible yet.

[hoangqwe159]

It is my quick implementation if anyone needs it: https://codesandbox.io/p/sandbox/flamboyant-ganguly-hwnv6t?file=%2Fsrc%2Findex.tsx

[jbrunner92]

Would be nice if there were an easy way to implement segmented and gradient gauges. I don't love the idea of creating multiple gauge containers to make one parent gauge.