React项目Chart.js从v3.9.1升级到v4.x出现TypeError问题求助

问题说明 #

将Chart.js从v3.9.1升级到v4.3.0后出现如下错误：

chart.js:5199 Uncaught TypeError: Cannot read properties of undefined (reading 'axis')
at determineAxis (chart.js:5199:1)
at eval (chart.js:5237:1)
at Array.forEach (<anonymous>)
at mergeScaleConfig (chart.js:5229:1)
at initOptions (chart.js:5279:1)
at initConfig (chart.js:5290:1)
at new Config (chart.js:5312:1)
at new Chart (chart.js:5593:1)
at eval (ActivityChart.tsx:65:1)
at invokePassiveEffectCreate (react-dom.development.js:23487:1)

v3.9.1中可正常运行的代码：

useEffect(() => {
  const ctx = canvasRef.current.getContext('2d');

  if (chartRef.current) {
    chartRef.current.destroy();
  }
  chartRef.current = new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: 'Month 1',
          data: WLossData as any,
          backgroundColor: colors.GraphBlue,
        },
      ],
    },
    plugins: [ChartDataLabels],
    options: {
      responsive: true,
      maintainAspectRatio: isMobile,
      layout: {
        padding: {
          left: 0,
          right: 0,
          top: isMobile ? 15 : 25,
          bottom: 0,
        },
      },
      scales: {
        title: {
          display: false,
        },
        x: {
          display: true,
          title: {
            display: true,
            text: intl.formatMessage({ id: messages.monthsInto.id }),
            font: {
              size: isMobile ? 10 : 13,
              family: 'GT-America-Standard-Regular',
            },
            color: colors.DarkSilver,
            padding: isMobile ? 5 : 20,
          },
          ticks: {
            display: true,
            // userCallback: function (item, index) {
            //   return null;
            // },
          },
          grid: {
            display: false,
            drawBorder: true,
          },
        },
        y: {
          title: {
            display: false,
          },
          beginAtZero: true,
          ticks: {
            display: false,

            callback: (item: number | string) =>
              // this only allows the first/base horizontal line
              item === 0 ? item : null,
          },
          grid: {
            display: true,
            drawBorder: false,
          },
        },
      },
      plugins: {
        // @ts-ignore
        datalabels: {
          display: true,
          align: 'center',
          anchor: 'center',
          color: '#ffffff',
          font: {
            weight: 'bold',
            size: 11,
          },
          labels: {
            value: {
              font: {
                weight: 'bold',
                family: 'GT-America-Standard-Medium',
              },
            },
          },
          formatter(value: number | string) {
            return `${value}%`;
          },
        },
        legend: {
          display: false,
        },
        tooltip: {
          ...baseTooltip,
          intersect: true,
          mode: 'nearest',
          callbacks: {
            title: () => null,
            label: (tooltipItem) => `${tooltipItem.parsed.y}%`,
          },
        },
      },
    },
  });
});

错误原因与修复方案 #

原因 #

Chart.js v4.x对scales配置的结构做了严格校验，你在scales根节点下直接添加的title属性，会被当作一个无效的scale配置项处理，导致内部解析逻辑找不到axis属性抛出错误。

修复步骤 #

1. 删除scales根节点下的title配置：该配置是多余的，且不符合v4的结构要求
2. 更新插件版本：确保chartjs-plugin-datalabels升级到v2.0.0及以上版本，适配Chart.js v4.x

修改后的scales配置部分：

scales: {
  x: {
    display: true,
    title: {
      display: true,
      text: intl.formatMessage({ id: messages.monthsInto.id }),
      font: {
        size: isMobile ? 10 : 13,
        family: 'GT-America-Standard-Regular',
      },
      color: colors.DarkSilver,
      padding: isMobile ? 5 : 20,
    },
    ticks: {
      display: true,
      // userCallback: function (item, index) {
      //   return null;
      // },
    },
    grid: {
      display: false,
      drawBorder: true,
    },
  },
  y: {
    title: {
      display: false,
    },
    beginAtZero: true,
    ticks: {
      display: false,

      callback: (item: number | string) =>
        // this only allows the first/base horizontal line
        item === 0 ? item : null,
    },
    grid: {
      display: true,
      drawBorder: false,
    },
  },
},

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