垂直条形图标签 MUI X 条形图

Question

如何在 Material Ui Charts Barchart 中实现类似的功能，

它隐藏了其他标签，是的，如果我放大宽度就可以看到，但我希望它即使在很小的空间上仍然显示，然后我将旋转它。

我已经尝试使用 sx prop 进行旋转，但有些标签仍然没有显示，所有丢失的标签都没有呈现，就像我在检查模式下查看的那样

Answer 1

当刻度标签很长并且不适合时，库不会渲染很少的标签并交替跳过。 您可以尝试旋转标签，如果数据集不太长而无法渲染，这将起到作用并填充所有标签。 尝试这个。将以下属性添加到“@mui/x-charts”中 BarChart 组件的“xAxis”属性。

<BarChart
        xAxis={[
            {
                id: 'barCategories',
                data: ['My big name 1', 'My big name 2', 'My big name 3', 'My big name 4', 'My big name 5'],
                scaleType: 'band',
                tickLabelStyle: {
                    angle: -25,
                    textAnchor: 'end',
                    fontSize: 12,
                },
            },
        ]}
        series={[{data: [2, 5, 3, 4, 6],},]}
        width={500}
    />

您可以根据自己的方便修改角度，使标签适合。