如何在react材料mui-x图表的BarChart中设置BarLabel样式

Question

我希望在设置时设置栏内显示的标签的样式

BarLabel="value"

更具体地说，我想设置它的字体大小

//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"
/>

我尝试将一个函数传递给 BarLabel prop 并返回带有样式的 html，但它只接受像这样返回的字符串：

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

看截图

条形图呈现为矩形元素，并且向其类添加样式对标签没有任何作用 --> 参见屏幕截图

有什么想法吗？

Answer 1

您可以通过

font-size

的

BarLabel

属性为

sx

设置自定义

BarChart

，如下所示：

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

您可以查看 this StackBlitz 以获取实时工作示例。