I want to use the material UI gauge but with a custom color for the value attribute displayed at the center. In this case the 60 displayed at the center of the image provided.
This is source code for the component:
<Gauge width={100} height={100} value={60} />
I’ve tried reading through the documentation to find a specific attribute that controls that but cant seem to find it.
Here’s a link to the documentation. and a screenshot of mui gauge component: .
MK_1.0 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
According to their documentation example, you can use a selector to select the corresponding element. After inspecting the element structure, you can use & .${gaugeClasses.valueText} text to select the text.
import * as React from 'react';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; // <-- import gaugeClasses
const settings = {
width: 200,
height: 200,
value: 60,
};
export default function ArcDesign() {
return (
<Gauge
{...settings}
sx={(theme) => ({
[`& .${gaugeClasses.valueText}`]: {
fontSize: 40,
},
[`& .${gaugeClasses.valueText} text`]: {
fill: "#3b82f6" // <-- change text color
},
})}
/>
);
}
1