如何在ApexCharts柱状图X轴标签中使用React JSX内容替代纯字符串

要在React的ApexCharts柱状图里用富文本作为X轴标签，核心是利用ApexCharts的HTML解析能力，具体实现步骤如下：

1. 开启X轴标签的HTML支持 #

在图表配置的xaxis.labels中设置useHTML: true，这是让ApexCharts解析标签内HTML内容的前提。

2. 自定义标签格式化函数 #

通过xaxis.labels.formatter函数，为每个X轴标签返回包含样式的HTML字符串，比如加粗、换行、自定义颜色等。

React代码示例 #

import React from 'react';
import Chart from 'react-apexcharts';

const RichTextXAxisBarChart = () => {
  const chartOptions = {
    xaxis: {
      categories: ['一月', '二月', '三月', '四月', '五月'],
      labels: {
        useHTML: true, // 关键：允许解析HTML
        formatter: (val) => {
          // 返回带样式的富文本标签，可根据需求调整
          return `
            <div style="text-align:center;">
              <span style="font-weight:600; color:#2d3748;">${val}</span>
              <br/>
              <span style="font-size:11px; color:#718096;">2024</span>
            </div>
          `;
        }
      }
    },
    yaxis: {
      title: { text: '月度销量' }
    },
    chart: { type: 'bar', height: 380 }
  };

  const series = [{ name: '产品A', data: [28, 42, 35, 51, 47] }];

  return (
    <div className="chart-wrapper">
      <Chart options={chartOptions} series={series} type="bar" height={380} />
    </div>
  );
};

export default RichTextXAxisBarChart;

注意事项 #

• 尽量使用内联样式，避免全局样式污染图表内的标签；如果用CSS类，要确保样式能正确作用到图表DOM（ApexCharts会把标签渲染在独立的DOM节点中）
• 不要在HTML里使用过于复杂的嵌套或脚本，避免渲染异常
• 如果需要动态生成富文本内容，可以结合额外的数据源（比如包含标签详情的数组），在formatter中匹配对应内容拼接HTML

内容的提问来源于stack exchange，提问作者Muhammad Zain Ejaz