How to style the BarLabel in BarChart of react material mui-x charts

Question

I am looking to style the label shown inside the bar when setting BarLabel="value"

More specifically, I want to set its font-size

//for reference --> import { BarChart } from "@mui/x-charts/BarChart"

<BarChart
  width={width}
  margin={{ top: 10, right: 30, bottom: 22, left: 40 }}
  height={height}
  series={[{ data: data, id: "uvId" }]}
  layout="horizontal"
  leftAxis={{
    disableTicks: true,
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  bottomAxis={{
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  yAxis={[
    {
      valueFormatter: (value) => `${value.slice(0, 5)}..`,
      data: labels,
      scaleType: "band",
      colorMap: {
        type: "ordinal",
        colors: ["#B8CDE0", "#A9ADB4"],
      },
    },
  ]}
  barLabel="value"
/>

I tried to pass a function to the BarLabel prop and return html with styles but it only accepts a string returned like so :

    barLabel={(item, context) => {
    //does not accept html --> <span style="font-size:5px;">{item.value}</span>
       return `${item.value}`
    }}

see screenshot

The bars are rendered as rect elements and adding styles to their classes does nothing to the label --> see screenshot

Any ideas ?

Answer 1

You can set custom font-size for BarLabel through sx prop of BarChart like this:

sx={{
    '& .MuiBarLabel-root': {
      fontSize: '30px',
    },
}}

You can take a look at this StackBlitz for a live working example.