如何在react-chartjs-2中自定义标签样式：实现直立显示及精简展示

要实现标签直立显示+减少数量的效果，你需要在options中配置**x轴刻度（ticks）**的相关参数——之前的代码只设置了图表标题，没涉及轴的核心配置，所以没生效。

核心配置方案 #

直接修改你的options，添加scales配置项：

<Chart
  type="line"
  data={data}
  options={{
    plugins: {
      title: {
        display: true,
        align: "center",
        color: "red"
      },              
    },
    scales: {
      x: {
        ticks: {
          // 让标签直立显示（旋转90度）
          rotation: 90,
          // 调整标签与x轴的间距，避免和图表内容重叠
          padding: 15,
          // 限制最多显示的标签数量
          maxTicksLimit: 5,
          // 自动跳过重复/密集标签（默认开启，可配合maxTicksLimit使用）
          autoSkip: true,
          // 【可选】自定义过滤逻辑，比如只显示偶数位置的标签
          // callback: function(value, index, values) {
          //   return index % 2 === 0 ? value : '';
          // }
        }
      }
    }
  }}
/>

关键参数说明 #

• rotation: 90：将x轴标签旋转90度，实现直立效果；如果标签和图表内容重叠，调整padding数值即可。
• maxTicksLimit：强制设置最多显示的标签数量，Chart.js会自动计算标签间隔来适配。
• autoSkip：默认开启，会自动跳过部分密集标签，防止重叠；配合maxTicksLimit能更精准控制显示数量。
• callback：如果需要更灵活的过滤规则（比如只显示特定日期、特定索引的标签），用这个函数自定义返回内容，返回空字符串就会隐藏对应标签。

内容的提问来源于stack exchange，提问作者Việt Văn Khắc