如何防止在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/>