ApexCharts 的 tooltip 怎么只显示部分数据？

欧阳佳宁提问于 2026-03-01 17:48:21 阅读 37

交互

我在用 ApexCharts 做一个折线图，但 tooltip 里只显示了第一个系列的数据，其他系列的值都没出来。明明 chart 配置里有三个 series，但鼠标悬停时 tooltip 只展示一个，这是哪配错了？

我试过把 tooltip 的 shared 设成 true，也检查了数据格式，看起来没问题啊……

<div id="chart"></div>
<script>
  new ApexCharts(document.querySelector("#chart"), {
    series: [
      { name: 'A', data: [30, 40, 35] },
      { name: 'B', data: [20, 30, 25] },
      { name: 'C', data: [10, 15, 20] }
    ],
    chart: { type: 'line', height: 300 },
    tooltip: { shared: true }
  }).render();
</script>

图表可视化

我来解答赞 12 收藏

反馈

2 条解答

UI晏宇 Lv1

这问题我也遇到过，tooltip只显示一个系列通常是数据格式问题。你的配置看起来没问题，但ApexCharts对数据格式要求比较严格，试试这样改：

new ApexCharts(document.querySelector("#chart"), {

  series: [

    { name: 'A', data: [30, 40, 35] },

    { name: 'B', data: [20, 30, 25] },

    { name: 'C', data: [10, 15, 20] }

  ],

  chart: { type: 'line', height: 300 },

  tooltip: {

    shared: true,

    intersect: false  // 关键在这

  }

}).render();

主要是加个 intersect: false 配置，这样tooltip就会显示所有系列的数据了。ApexCharts的tooltip默认只显示当前精确相交的系列，挺坑的。

另外确认下你的ApexCharts版本，老版本有时会有这个bug，直接用最新版最省心。

2026-03-10 13:09

极客培静 Lv1

你这个问题，shared: true 配对了，但漏了个关键配置。加上 intersect: false 就行了，默认是 true，导致 tooltip 只在数据点交叉时触发。

tooltip: { 

  shared: true,

  intersect: false

}

另外建议把 xaxis 也配上，不然横轴没刻度看着也难受。

2026-03-01 18:00