Apexcharts(React)折线图X轴分组标签不显示问题求助

ApexCharts的X轴分组标签默认仅在柱状图（bar/column）中生效，切换到折线图时需要额外配置才能显示，具体解决步骤如下：

关键配置调整 #

• 给xaxis添加tickPlacement: 'between'：将刻度移到数据点之间，为分组标签留出渲染空间（折线图默认刻度在数据点正下方，没有多余空间显示分组标签）
• 确保categories数组长度与分组的cols总和完全匹配（这里3组×10个=30个分类）

完整示例代码 #

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

const GroupedLineChart = () => {
  // 生成对应数量的分类（3组×10个）
  const xCategories = Array.from({ length: 30 }, (_, idx) => `项 ${idx + 1}`);
  // 生成测试数据
  const chartSeries = [{
    name: '业务数据',
    data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 100))
  }];

  const chartOptions = {
    chart: {
      type: 'line',
      height: 380
    },
    xaxis: {
      categories: xCategories,
      // 核心配置：将刻度放在数据点之间
      tickPlacement: 'between',
      group: {
        groups: [
          { title: '2020', cols: 10 },
          { title: '2021', cols: 10 },
          { title: '2022', cols: 10 }
        ],
        // 可选：自定义分组标签样式
        style: {
          fontSize: '14px',
          fontWeight: '600',
          color: '#333'
        }
      }
    },
    yaxis: {
      title: { text: '数值' }
    },
    tooltip: {
      x: { show: true }
    }
  };

  return (
    <div>
      <ReactApexChart 
        options={chartOptions} 
        series={chartSeries} 
        type="line" 
        height={380} 
      />
    </div>
  );
};

export default GroupedLineChart;

原理说明 #

ApexCharts的分组标签功能最初是为柱状图设计的——柱状图的柱子天然有分组间距，分组标签可以直接对齐分组区域。而折线图默认将刻度渲染在数据点正下方，没有预留分组标签的显示空间，通过tickPlacement: 'between'调整刻度位置后，就能正常渲染分组标签了。

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