Search code examples
javascriptapexchartstsx

ApexCharts: Show Shared Tooltip on overlapping y values

Hello everyone I'm trying to make a shared tooltip to happen only when the y-axis values are the same. Which means my markers overlap each other. Same time I want to have the shared option disable. Looking through the docs I found out that this probably can happen with a custom function. Any tips?

My current tooltip options:

tooltip: {
        enabled: true,
        shared: false,
        intersect: true,
        y: {
          formatter: function (val) {
          return val + "%";
        },
        },
        x: {
          show: true,
        },
        marker: {
            show: true
          },
      },

For example in the picture below the marker with the light-green overlap two others lines. If I hover over the marker the tooltip will show me only the value of that line.

enter image description here

Solution

  • You could just use shared:true instead of false

    https://apexcharts.com/docs/options/tooltip/#shared

    tooltip: {
        enabled: true,
        shared: true,
        intersect: true,
        y: {
          formatter: function (val) {
          return val + "%";
        },
        },
        x: {
          show: true,
        },
        marker: {
            show: true
          },
      },