react-apexcharts移动端水平条形图能否设置点击显示Tooltip？

ApexCharts 没有直接提供点击触发Tooltip的配置项，不过可以通过其内置API结合事件监听来实现需求，具体步骤如下：

1. 获取图表实例 #

通过 React 的 useRef 获取 react-apexcharts 的实例，方便后续调用Tooltip控制方法：

import { useRef } from 'react';
import ReactApexChart from 'react-apexcharts';

const BarChart = () => {
  const chartRef = useRef(null);
  
  // 定义图表数据与配置...
  
  return (
    <ReactApexChart
      ref={chartRef}
      options={chartOptions}
      series={seriesData}
      type="bar"
      height={350}
    />
  );
};

2. 配置点击事件并手动控制Tooltip #

在图表的 options 中添加 events 配置，监听点击事件，通过图表实例的 showTooltip 和 hideTooltip 方法控制Tooltip显示：

const chartOptions = {
  chart: {
    events: {
      click: (event, chartContext, config) => {
        // 仅在移动端触发，可根据需求调整屏幕尺寸阈值
        if (window.innerWidth < 768) {
          // 先隐藏已显示的Tooltip
          chartContext.hideTooltip();
          // 显示当前点击条形对应的Tooltip
          chartContext.showTooltip({
            seriesIndex: config.seriesIndex,
            dataPointIndex: config.dataPointIndex
          });
        }
      }
    }
  },
  tooltip: {
    // 保留原有hover触发逻辑，桌面端仍正常使用
    enabled: true
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  }
  // 其他图表配置...
};

3. 可选：通过响应式配置区分终端 #

如果需要更精准的响应式控制，可在 responsive 配置中针对不同断点单独设置点击事件：

const chartOptions = {
  // ...其他基础配置
  responsive: [
    {
      breakpoint: 768,
      options: {
        chart: {
          events: {
            click: (event, chartContext, config) => {
              chartContext.hideTooltip();
              chartContext.showTooltip({
                seriesIndex: config.seriesIndex,
                dataPointIndex: config.dataPointIndex
              });
            }
          }
        }
      }
    },
    {
      breakpoint: 1024,
      options: {
        chart: {
          // 桌面端移除点击触发逻辑，仅保留hover
          events: {}
        }
      }
    }
  ]
};

关键说明 #

• 核心依赖 ApexCharts 提供的 showTooltip 和 hideTooltip 实例方法，实现Tooltip的手动控制
• 可通过屏幕尺寸或设备检测逻辑，确保仅在移动端启用点击触发逻辑，不干扰桌面端的hover体验

内容的提问来源于stack exchange，提问作者Maarten van der Meulen