# Apex Charts Tooltip Formatting

**URL:** <https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [August 7, 2025, 11:47am UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475 "2025-08-07T11:47:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nolan.pratt](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nolan.pratt/32/78503_2.png) [@nolan.pratt](https://forum.inductiveautomation.com/u/nolan.pratt)\
**Post date:** [August 7, 2025, 11:47am UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475/1 "2025-08-07T11:47:29Z")

</div>

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:

```python
"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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/24bb0a0d4c2ec7e18a913c87af12b19602ef2a89.png)  
 ![Mouse in the blank area below the data point](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/8/b8bf1d3f96e5c360f4c336c7b8c9ad860f5c5fa9.png)

---

<div class="post-metadata">

**Author:** ![Jared\_McNamee](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@Jared\_McNamee](https://forum.inductiveautomation.com/u/Jared_McNamee)\
**Post date:** [August 13, 2025, 5:13pm UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475/2 "2025-08-13T17:13:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nolan.pratt](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nolan.pratt/32/78503_2.png) [@nolan.pratt](https://forum.inductiveautomation.com/u/nolan.pratt)\
**Post date:** [August 13, 2025, 7:03pm UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475/3 "2025-08-13T19:03:54Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1940e781631036c2c8859e88a64cd4792751001.png)

---

<div class="post-metadata">

**Author:** ![Jared\_McNamee](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@Jared\_McNamee](https://forum.inductiveautomation.com/u/Jared_McNamee)\
**Post date:** [August 13, 2025, 7:34pm UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475/4 "2025-08-13T19:34:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nolan.pratt](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nolan.pratt/32/78503_2.png) [@nolan.pratt](https://forum.inductiveautomation.com/u/nolan.pratt)\
**Post date:** [August 13, 2025, 8:26pm UTC](https://forum.inductiveautomation.com/t/apex-charts-tooltip-formatting/109475/5 "2025-08-13T20:26:31Z")

</div>

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; }`