React-ApexChart环形图无法渲染，报TypeError: failed to execute 'appendChild'

问题描述 #

使用函数式组件渲染React-ApexChart环形图，参照官方Demo实现，但始终抛出Typeerror failed to execute appendChild错误，图表仅显示蓝色圆圈。当前依赖版本如下：

"dependencies": {
  "apexcharts": "^4.0.0",
  "flowbite-react": "^0.10.2",
  "react": "^18.3.1",
  "react-apexcharts": "^1.6.0",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.28.0"
}

组件代码：

const DonutChart = () => {
  const chartData = {
    series: [44, 55, 13, 33],
    options: {
      chart: {
        width: 380,
        type: 'donut',
      },
      dataLabels: {
        enabled: false
      },
      responsive: [{
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          legend: {
            show: false
          }
        }
      }],
      legend: {
        position: 'right',
        offsetY: 0,
        height: 230,
      }
    },
  }

  return (
    <>
      <ReactApexChart
        options={chartData.options}
        series={chartData.series}
        type="donut"
        width={300}
      />
    </>
  )
}

问题原因及解决方案 #

1. 版本不兼容（核心问题） #

react-apexcharts@1.6.0与apexcharts@4.0.0存在适配冲突，apexcharts 4.x对DOM操作逻辑做了重大调整，旧版react-apexcharts无法兼容。

两种解决方式任选其一：

• 降级apexcharts到3.x稳定版本：

  npm install apexcharts@3.49.0 --save
  

• 升级react-apexcharts至适配4.x的最新版本：

  npm install react-apexcharts@latest --save
  

2. 缺失组件导入语句 #

代码中使用了<ReactApexChart>但未导入，需在组件顶部添加导入代码：

import ReactApexChart from 'react-apexcharts';

3. 冗余配置导致冲突 #

同时在组件props和options中设置了width属性（props的width={300}与options.chart.width=380），易引发渲染逻辑冲突。建议删除props中的width配置，保留options里的响应式设置：

// 修改后返回的组件
return (
  <ReactApexChart
    options={chartData.options}
    series={chartData.series}
    type="donut"
  />
)

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