Apex Charts Tooltip Formatting

Ignition
,
1

Hey all,

I’m building a trendline solution to visualize serialized part data on an ApexCharts Line chart in Perspective. The goal is to show the serial number (SN) in the tooltip when hovering along the x-axis.

I’m using the following inline string for the formatter, which works if the mouse is directly over the data point:

function (value, { seriesIndex, dataPointIndex, w }) { return "SN: " + w.config.series[seriesIndex].data[dataPointIndex].sn; }

However, the tooltip only triggers when hovering precisely over the point - not when hovering anywhere along the x-value. This makes the tooltip unreliable and hard to interact with unless you’re exactly over the marker, which can lead to inaccessible values when a data point's y-value is outside of the chart bounds.

Looking for suggestions on how to get the tooltip to fire even if the mouse isn’t exactly over the dot.

Current tooltip config and behavior below:

"tooltip": {
  "enabled": true,
  "enabledOnSeries": [
    0,
    1,
    3
  ],
  "fillSeriesColor": true,
  "followCursor": false,
  "intersect": false,
  "inverseOrder": false,
  "marker": {
    "show": true
  },
  "shared": true,
  "style": {
    "fontFamily": "Roboto",
    "fontSize": "12px"
  },
  "theme": "light",
  "x": {
    "format": null,
    "formatter": "function (value, { seriesIndex, dataPointIndex, w }) { return \"SN: \" + w.config.series[seriesIndex].data[dataPointIndex].sn; }",
    "show": true
  },
  "y": {
    "title": {
      "formatter": null
    }
  }
}

Mouse directly over the data point
Mouse directly over the data point1069×743 39.7 KB

Mouse in the blank area below the data point
Mouse in the blank area below the data point1084×741 37 KB

2

I think setting Intersect to true will accomplish what you are looking for

3

The JavaScript callout in the ApexCharts documentation says the intersect property would enable the behavior that I want to avoid - displaying only when hovering exactly over a y-value. I seem to be getting this behavior even with the intersect property set to false.
image

4

Oh ok, set followCursor to True. You may be able to remove marker from the tool tip parameters as well I often don’t even include it, but followCursor should make the xaxis - trace lock to the nears data point while hovering the chart.

5

The followCursor setting did not work.

I actually found 2 solutions after doing some testing based on the documentation:

  1. The documentation highlights that multiple series on a shared graph need to be configured with matching x-axis ranges, so I extracted that maybe each series needs to share not just the x-axis but also the same parameter scope. The tooltip showcased the x-value's matching serial number once I added it as a value to the other series.

  2. The tooltip formatter was actually looking at the seriesIndex callout to define which datapointIndex it needed to pull from, which is obviously undefined when not hovering over a series within the view, so I updated the series to look only at the 0th dataset as this is where I am actually storing the serial number value.

I'll be implementing the second solution to minimize redundant data storage.

Here's the updated inline formatter I used to accomplish this:
function (value, { dataPointIndex, w }) { return "Serial: " + w.config.series[0].data[dataPointIndex].sn; }