使用Recharts绘制LineChart时XAxis全部刻度标签未显示如何解决

问题原因 #

Recharts的XAxis组件默认开启自动刻度间隔计算逻辑，会自动隐藏判定为空间不足、会发生重叠的刻度，所以你只会看到间隔显示的部分标签。同时你注释的ticks配置写法错误，你的数据源中name是带시后缀的字符串，传纯数字数组无法匹配到对应刻度值。

需添加的配置项 #

• 给XAxis添加interval={0}属性：该属性控制刻度显示间隔，设置为0时强制显示所有刻度，关闭自动隐藏逻辑
• 若担心标签拥挤重叠，可额外添加angle={-45}属性将刻度标签旋转45度，同时调整图表margin的bottom值（比如改成20），给标签预留足够的展示空间
• 如果要手动指定ticks，需要和name字段取值完全匹配，示例：ticks={["10시","11시","12시","13시","14시","15시","16시","17시","18시","19시","20시","21시","22시","23시","24시"]}

修改后完整代码示例 #

<ResponsiveContainer width="100%" height={250}>
  <LineChart
    data={lineData}
    margin={{ top: 20, right: 0, left: -15, bottom: 20 }}
  >
    <Line type="monotone" dataKey="uv" stroke="red" />
    <XAxis
      dataKey="name"
      tick={{ fontSize: 10 }}
      interval={0}
      angle={-45}
      textAnchor="end"
    />
    <YAxis tick={{ fontSize: 10 }} ticks={[0, 10, 20, 30, 40]} />
  </LineChart>
</ResponsiveContainer>

内容的提问来源于stack exchange，提问作者JiwanJeon94