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

​