react-apexcharts中Y轴刻度符号无法动态更新问题

问题分析 #

切换Y轴刻度类型（百分比/美元）时，刻度数值能正确变化，但标签的%/$符号无法实时更新，仅页面刷新后才生效。核心原因是react-apexcharts对formatter函数的变更检测不敏感，直接更新chartOptions中的formatter无法触发图表重新计算轴标签。

解决方案 #

方法1：给Chart组件添加动态Key #

通过给Chart组件设置与scale绑定的key，当刻度类型切换时，强制组件重新渲染，确保新的formatter生效。

修改后的完整代码：

const { createRoot } = ReactDOM;
const { Fragment, StrictMode, useEffect, useState } = React;
const Chart = ReactApexChart;

const App = () => {
  const baseChartOptions = {
    chart: {
      type: 'line',
    },
    series: [
      {
        name: 'serie1',
        data: [1, 2, 3],
      },
    ],
    xaxis: {
      categories: ['a', 'b', 'c'],
    },
  };
  const [chartOptions, setChartOptions] = useState(baseChartOptions);
  const [scale, setScale] = useState('percentage');

  useEffect(() => {
    const getYAxisFormatter = (val) => {
      return scale === 'percentage' ? `${val.toFixed(1)}%` : `$${val.toFixed(2)}`;
    };

    setChartOptions((prevOptions) => ({
      ...prevOptions,
      yaxis: { labels: { formatter: getYAxisFormatter } },
    }));
  }, [scale]);

  return (
    <Fragment>
      <h4>{scale}</h4>
      <button onClick={() => setScale('dollars')}>Dollars</button>
      <button onClick={() => setScale('percentage')}>Percentage</button>
      {/* 添加与scale绑定的key，强制重新渲染 */}
      <Chart 
        key={scale}
        options={chartOptions} 
        series={chartOptions.series} 
        type="bar" 
        width="500" 
        height="320" 
      />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

方法2：使用ApexCharts实例的updateOptions方法 #

通过获取图表实例，直接调用updateOptions方法更新Y轴配置，这种方式无需重新渲染整个组件，性能更优。

修改后的完整代码：

const { createRoot } = ReactDOM;
const { Fragment, StrictMode, useEffect, useRef, useState } = React;
const Chart = ReactApexChart;

const App = () => {
  const baseChartOptions = {
    chart: {
      type: 'line',
    },
    series: [
      {
        name: 'serie1',
        data: [1, 2, 3],
      },
    ],
    xaxis: {
      categories: ['a', 'b', 'c'],
    },
    yaxis: {
      labels: {
        formatter: (val) => `${val.toFixed(1)}%`
      }
    }
  };
  const chartRef = useRef(null);
  const [scale, setScale] = useState('percentage');

  useEffect(() => {
    const getYAxisFormatter = (val) => {
      return scale === 'percentage' ? `${val.toFixed(1)}%` : `$${val.toFixed(2)}`;
    };

    // 直接调用实例的updateOptions方法更新配置
    if (chartRef.current) {
      chartRef.current.chart.updateOptions({
        yaxis: { labels: { formatter: getYAxisFormatter } }
      });
    }
  }, [scale]);

  return (
    <Fragment>
      <h4>{scale}</h4>
      <button onClick={() => setScale('dollars')}>Dollars</button>
      <button onClick={() => setScale('percentage')}>Percentage</button>
      {/* 绑定ref获取图表实例 */}
      <Chart 
        ref={chartRef}
        options={baseChartOptions} 
        series={baseChartOptions.series} 
        type="bar" 
        width="500" 
        height="320" 
      />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

方案对比 #

• 方法1实现简单，适合小型图表或快速开发场景；
• 方法2避免组件完全重渲染，性能更优，适合复杂图表或大数据量场景。

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