如何防止在 React Recharts 中破坏轴长标签?
How to prevent breaking axis long labels in React Recharts?
我正在使用 React Recharts (http://recharts.org/en-US/) 来显示一些图表数据,我需要在轴附近显示格式化值。轴值以空格分隔,例如 1 000 000 $
。 React Recharts 将值分成单独的行
如何防止打断标签并在同一行完整显示?
您是否尝试过使用刻度格式化程序?我试图重现您的问题,但无法重现。
这是一个重新设计的图表,对我来说效果很好。
<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>
如果误解了您的问题,请告诉我。
您可以指定刻度的宽度
例如,
<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>
我正在使用 React Recharts (http://recharts.org/en-US/) 来显示一些图表数据,我需要在轴附近显示格式化值。轴值以空格分隔,例如 1 000 000 $
。 React Recharts 将值分成单独的行
如何防止打断标签并在同一行完整显示?
您是否尝试过使用刻度格式化程序?我试图重现您的问题,但无法重现。
这是一个重新设计的图表,对我来说效果很好。
<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>
如果误解了您的问题,请告诉我。
您可以指定刻度的宽度 例如,
<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>