如何防止在 React Recharts 中破坏轴长标签？

Question

我正在使用 React Recharts (http://recharts.org/en-US/) 来显示一些图表数据，我需要在轴附近显示格式化值。轴值以空格分隔，例如 1 000 000 $。 React Recharts 将值分成单独的行

如何防止打断标签并在同一行完整显示？

Answer 1

您是否尝试过使用刻度格式化程序？我试图重现您的问题，但无法重现。

这是一个重新设计的图表，对我来说效果很好。

<ResponsiveContainer height={400} width="100%">
    <ComposedChart
      height={400}
      width="100%"
      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
    >
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis
        unit="$"
        dataKey="y"
        tickFormatter={val => val.toLocaleString().replace(/,/g, " ")}
      />
      <Scatter
        name="A school"
        data={[
          { name: "Jill", y: 3000000 },
          { name: "Eve", y: 5000000 },
          { name: "Audrey", y: 1000000 },
          { name: "Jaqueline", y: 7000000 }
        ]}
        fill="#8884d8"
      />
      <Tooltip />
    </ComposedChart>
  </ResponsiveContainer>

如果误解了您的问题，请告诉我。

Answer 2

您可以指定刻度的宽度例如，

<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>

如何防止在 React Recharts 中破坏轴长标签？

How to prevent breaking axis long labels in React Recharts?

reactjs

recharts