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

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