React-ApexCharts开发环境下Cannot read 'toString'错误求助

问题场景 #

使用react-apexcharts开发时触发TypeError: Cannot read properties of undefined (reading 'toString')错误，固定组件的width/height属性或切换到生产环境时错误消失，但需实现响应式布局，不想固定宽高；尝试用CSS设置宽高但组件内联样式优先级更高，无法生效。

解决思路 #

该错误源于图表初始化时容器尺寸为0或undefined，核心是确保图表渲染时容器已有有效尺寸，同时让图表自适应容器实现响应式。

可行方案 #

方案1：延迟渲染图表，确保容器尺寸可用 #

通过状态控制图表渲染时机，等待容器挂载并获取有效尺寸后再渲染，同时监听窗口resize事件保证响应式适配。

修改后的代码示例：

import { useState, useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export function ChartComponent() {
  const [isReady, setIsReady] = useState(false);
  const containerRef = useRef(null);
  
  const options: ApexOptions = {
    chart: {
      id: "chart",
      background: "#030a4d8d",
      fontFamily: "Roboto",
      redrawOnWindowResize: true,
      selection: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
    },
    dataLabels: {
      background: {
        borderRadius: 10,
      },
      style: {
        colors: ["#142085"],
      },
    },
    colors: ["#7e838c", "#474d59", "#363b47"],
    grid: {
      show: false,
    },
    legend: {
      fontFamily: "Roboto",
    },
    noData: {
      text: "未找到数据",
      style: {
        fontFamily: "Roboto",
      },
    },
    xaxis: {
      categories: ["系统", "命令", "服务器"],
      labels: {
        style: {
          colors: "#f5f7fa",
          fontFamily: "Roboto",
        },
      },
    },
    yaxis: {
      show: false,
    },
    series: [
      {
        data: [100, 200, 300],
      },
    ],
    tooltip: {
      enabled: false,
    },
  };

  useEffect(() => {
    // 容器挂载且有有效宽度时，允许渲染图表
    if (containerRef.current && containerRef.current.offsetWidth > 0) {
      setIsReady(true);
    }

    // 监听窗口 resize，触发图表重绘适配尺寸
    const handleResize = () => {
      if (containerRef.current) {
        setIsReady(false);
        setTimeout(() => setIsReady(true), 100);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div ref={containerRef} className="chart-container">
      {isReady && (
        <Chart
          options={options}
          series={options.series}
          type="bar"
          {/* 移除固定的width/height属性 */}
        />
      )}
    </div>
  );
}

方案2：强制用CSS覆盖组件内联样式 #

如果方案1仍有问题，可通过CSS的!important强制覆盖apexcharts的内联样式，让图表占满容器：

.chart-container {
  width: 100%;
  min-height: 300px; /* 根据布局需求调整 */
}

.chart-container .apexcharts-canvas {
  width: 100% !important;
  height: 100% !important;
}

关键注意点 #

• 移除options.chart中的width和height配置，同时不要给Chart组件传递固定的width/height属性
• 确保容器.chart-container有明确尺寸（可设为百分比、flex占比或min-height）
• 保留ssr: false配置，确保图表仅在客户端渲染，避免服务端渲染时的尺寸计算问题

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