坐标轴

本指南将向您展示如何自定义图表组件的 X 轴和 Y 轴。

X 轴

自定义刻度格式

要格式化 X 轴上的标签（例如，将月份从January 缩写为 Jan，根据区域设置）

<XAxis dataKey="date" tickFormatter={chart.formatDate({ month: "short" })} />

旋转 X 轴标签

如果标签重叠，旋转它们以提高可读性

<XAxis dataKey="name" angle={-45} textAnchor="end" />

调整 X 轴内边距

控制第一个和最后一个刻度标签之间的间距

<XAxis dataKey="name" padding={{ left: 20, right: 20 }} />

隐藏 X 轴

如果您需要完全移除 X 轴

<XAxis hide />

自定义 X 轴标签

使用函数渲染自定义标签

<XAxis dataKey="name" tick={{ fontSize: 12, fill: "blue" }} />

Y 轴

设置域

手动定义最小值和最大值

<YAxis domain={[0, "dataMax + 100"]} />

格式化标签

例如，将值转换为百分比

<YAxis tickFormatter={(value) => `${value}%`} />

调整宽度

控制分配给 Y 轴标签的空间

<YAxis width={50} />

隐藏 Y 轴

从图表中移除 Y 轴

<YAxis hide />

自定义网格线

启用或移除与 Y 轴关联的网格线

<YAxis tickLine={false} axisLine={false} />

额外自定义

多个 X 轴或 Y 轴

在单个图表中叠加多个坐标轴

<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />

参考线

使用参考线突出显示特定值

<ReferenceLine y={1000} stroke="red" label="Threshold" />

坐标轴刻度和线条

通过将其设置为 false 来移除刻度线和坐标轴线。

<XAxis tickLine={false} axisLine={false} />
<YAxis tickLine={false} axisLine={false} />