如何移除react-chartjs-2图表首个数据点前的空白间隙？

针对你使用react-chartjs-2 5.2.0遇到的x轴两端多余空白问题，直接修改x轴配置并新增关键参数即可解决，以下是调整后的完整配置：

export const options = {
  responsive: true,
  interaction: {
    mode: "index" as const,
    intersect: false,
  },
  stacked: true,
  // 新增：控制图表整体内边距，避免容器层面的空白
  layout: {
    padding: {
      left: 0,
      right: 0,
    },
  },
  plugins: {
    title: {
      display: false,
      text: "Chart.js Line Chart - Multi Axis",
    },
    legend: {
      display: false,
    },
    annotation: {
      annotations: {
        line1: {
          type: "line",
          yMin: 150.0,
          yMax: 150.0,
          borderColor: "rgb(255, 99, 132)",
          borderWidth: 2,
        },
      },
    },
  },
  scales: {
    y: {
      grid:{
        drawTicks: false,
       },
      type: "linear" as const,
      display: true,
      position: "left" as const,
      stacked: true,
      ticks: {
        color: "#006FAF",
        font: {
          size: 16,
          family: "NimbusSansNovusDRegular",
        },
      },
    },
    x: {
      // 新增：明确指定为类别轴，匹配月份分类数据
      type: "category" as const,
      stacked: true,
      offset: false,
      // 新增：完全移除轴两端的默认留白（核心解决参数）
      grace: 0,
      grid: {
        drawTicks: false,
        // 可选：移除x轴边框，让视觉上更贴合图表边缘
        drawBorder: false,
      },
      ticks: {
        color: "#006FAF",
        font: {
          size: 16,
          family: "NimbusSansNovusDRegular",
        },
        // 可选：减少刻度文字与轴的间距，优化紧凑度
        padding: 0,
      },
    },
  },
};

export const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

关键配置说明： #

• type: "category"：明确x轴为类别轴，确保Chart.js正确解析月份这类分类数据，避免自动生成不必要的留白
• grace: 0：强制取消轴两端的默认留白，是解决两端空白的核心设置（仅Chart.js 3.x+版本支持，你的版本符合要求）
• layout.padding：从图表容器层面消除内边距，避免容器样式导致的额外空白

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