How can I apply simple font-style (change the size) to a React/Material-UI x-charts BarChart Legend text element? The documentation suggests that:
However I have been unable to make any custom styling work?
I have tried creating and then using a StyledBarChart
with my custom styling:
import { styled } from '@mui/material/styles';
import { BarChart } from "@mui/x-charts/BarChart";
const StyledBarChart = styled(BarChart)(({ theme }) => ({
theme,
"& .MuiChartsLegend-series text": {
fontSize: '0.8em',
},
}));
export default StyledBarChart;
and have tried using the sx
property on the BarChart component as well:
<BarChart
sx={{ "& .MuiChartsLegend-series text": { fontSize: "0.8em" } }}
dataset={...}
series={[...]}
xAxis={...}
/>
However in all instances, the legend text element receives styling which overrides all my CSS styles? My final HTML always ends up looking like:
<text
x="11"
y="0"
text-anchor="start"
dominant-baseline="central"
style="font-family:
Montserrat, sans-serif;
font-weight: 400;
font-size:1rem;
line-height: 1;
color: inherit;
fill: rgba(0, 0, 0, 0.87);"
>
<tspan x="11" dy="0px" dominant-baseline="central">My Legend Text Item</tspan>
</text>
Is there a way to customize this font-size for these legends somehow?
2
Answers
The only thing that worked for me was adding
!important
to the style:Try this: