在Material UI中，如何防止LineChart Y轴标签与刻度标签重叠？

Question

我一直在使用非常基本的LineChart，其渲染如下：

如您所见，

Money

标签与刻度线重叠。避免这种情况的最佳方法是什么？

来源

LineChart

：

  const xAxisMax = _.max(turns) ?? defaultXAxisMax
  const yAxisMax = _.max(money) ?? defaultYAxisMax
  return (
    <LineChart
      xAxis={[
        {
          data: turns,
          min: 1,
          max: xAxisMax,
          label: 'Turns',
          scaleType: 'linear',
        },
      ]}
      yAxis={[
        {
          min: 0,
          max: yAxisMax,
          label: 'Money',
          scaleType: 'linear',
          //labelStyle: { ??? },
        },
      ]}
      series={[
        {
          data: money,
        },
      ]}
      width={500}
      height={300}
    />
  )
}

来自我的

npm ls

的相关台词

+-- @emotion/[email protected]
+-- @emotion/[email protected]
+-- @fontsource/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @vitejs/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

在文档中，我在这里发现了一些示例自定义的提及：

https://mui.com/x/react-charts/axis/#text-customization

上面写着：

<ScatterChart
  {/** ... */}
  bottomAxis={{
    labelStyle: {
      fontSize: 14,
      transform: `translateY(${
            // Hack that should be added in the lib latter.
            5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
          }px)`
    },
    tickLabelStyle: {
      angle: 45,
      textAnchor: 'start',
      fontSize: 12,
    },
  }}

这加上其他一些相关文章让我相信我可以以某种方式应用

labelStyle

的

yAxis

。然而，无论我尝试什么，

padding

、

margin

等等，正如 Chrome DevTools 所检查的那样，它似乎总是被渲染的页面覆盖/忽略。

但是，

transform

似乎确实被渲染了，例如：

labelStyle: { transform: 'rotate(-90deg)' },

但我不知道

transform

的正确值是多少，只需将标签稍微移到一边即可。

注意我没有任何影响任何类型布局的 CSS 自定义。

<ThemeProvider>

中没有自定义布局，也没有其他恶作剧。

Answer 1

这是它的CSS解决方案，我们可以在图表中添加一个类，以防止CSS影响其他图表！

MuiChartsYAxis-directionY 文档

.custom-y-padding-bottom .MuiChartsAxis-directionY .MuiChartsAxis-label {
  transform: translateX(-10px) !important;
}

堆栈闪电战