ChartJS图表X轴标签重叠问题求助（附代码片段）

核心问题定位 #

你的代码里labels: [ChartData.map((data) => data.id)]是错误根源：ChartData.map()本身会返回一个一维数组（比如[1,2,3,4,5,6,7]），但你给它套了一层额外的数组，最终labels变成了二维数组[[1,2,3,4,5,6,7]]。Chart.js无法正确解析这种结构，导致所有标签被当成单个元素渲染，进而出现堆叠重叠。

修复步骤 #

1. 修正labels的定义 #

直接使用map返回的一维数组作为labels，去掉外层多余的方括号：

修改App.js中的useState部分：

const [chartData, setChartData] = useState({
  labels: ChartData.map((data) => data.id), // 移除外层[]
  datasets: [{
      label: "Users Gained",
      data: ChartData.map((data) => data.userGain)
  }],
})

2. 换回年份标签的优化方案 #

如果想重新用year作为X轴标签，可通过配置Chart.js的X轴刻度选项，避免标签拥挤重叠：

在BarChart.js中添加配置项：

import React from "react"
import { Bar } from 'react-chartjs-2'
import {Chart as ChartJS} from "chart.js/auto"

const BarChart = ({chartData}) => {
  const options = {
    scales: {
      x: {
        ticks: {
          maxRotation: 45, // 标签最大旋转角度
          minRotation: 45, // 标签最小旋转角度
          autoSkip: true, // 自动跳过部分标签避免拥挤
          maxTicksLimit: 7 // 限制最大显示刻度数
        }
      }
    }
  }

  return (
    <>
      <Bar data={chartData} options={options} />
    </>
  )
}

export default BarChart

此时App.js中的labels可改回：

labels: ChartData.map((data) => data.year),

修改后的完整App.js代码 #

import { useState, useEffect } from "react";
import BarChart from "./components/BarChart";
import { ChartData } from "./Data";
import LineChart from "./components/LineChart";
import React from "react";
import { Bar } from 'react-chartjs-2'

const App = () => {
  const [chartData, setChartData] = useState({
    labels: ChartData.map((data) => data.id),
    datasets: [{
        label: "Users Gained",
        data: ChartData.map((data) => data.userGain)
    }],
  })

  return (
    <>
        <div className="col-12">
            <h1 className="fs-6">WEBSITE VISITORS</h1>
            <BarChart chartData={chartData} />
        </div>
    </>
  )
}

export default App

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