# Apexcharts Custom Tooltip Behavior

**URL:** <https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472>\
**Category:** Ignition\
**Tags:** scripting, perspective\
**Created:** [October 15, 2025, 2:21pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472 "2025-10-15T14:21:29Z")\
**Posts on this page:** 7\
**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:** [October 15, 2025, 2:21pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/1 "2025-10-15T14:21:29Z")

</div>

Hey everyone,

I’ve built a trendline chart using the ApexCharts module within Ignition Perspective and am trying to modify the tooltip marker behavior that appears when a user hovers over the chart. I’m using a **custom tooltip** , and I’ve noticed that the **default ApexCharts tooltip behavior** causes **hover markers to appear for all active series** on the chart simultaneously.

Custom Tooltip, which only controls the HTML element rendered for the datapoint:

```JS
function ({ series, seriesIndex, dataPointIndex, w }) {
    const hoverX = w.globals.seriesX[seriesIndex][dataPointIndex];
    const hoverIndexes = w.globals.seriesX.map((seriesX) => {
        return seriesX.findIndex((x) => x === hoverX);
    });
    let html = '<ul class="psc-apexcharts-custom-tooltip">';
    hoverIndexes.forEach((hoverIndex, sIdx) => {
        if (hoverIndex >= 0 && !w.globals.collapsedSeriesIndices.includes(sIdx)) {
            const pt = w.config.series[sIdx].data[hoverIndex];
            if (pt && pt.sn) {
                html += `
                <li class="psc-apexcharts-custom-tooltip-content">
                    <div class="psc-tooltip-value">${w.globals.seriesNames[sIdx]}-Metric: ${pt.y}</div>
                    <div class="psc-tooltip-sn">Serial: ${pt.sn}</div>
                </li>`;
            }
        }
    });
    html += '</ul>';
    return html;
}

```

My goal is to control which series display these markers on hover, allowing only certain series to show the circular marker when the tooltip is active, rather than every series on the graphic.

Chart Example:

 ![Chart Example](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/786e1d9e142ba15a7bf1ac8fcae0516d71af6dee.png)

Each series appears to have its own tooltip container with a distinct class naming pattern of `apexcharts-tooltip-series-group-${seriesIndex}`, which includes a child class,`.apexcharts-tooltip-marker`. Modifying these do not affect the SVG marker elements tied to the hover interaction.

I’ve tracked the module-wide style the controls all series' markers using the library's Github repo, called out as `.apexcharts-series-markers`. Adjusting the opacity of this class lets me hide or show **all markers globally** , but I haven’t found a way to selectively target specific series. This isn't ideal anyway since it prevents me from using markers on the chart at all.

Using the `enabledOnSeries` component property within the tooltip hierarchy also does not work as this **only applies to the default tooltip popup** that controls which series y-values to display when a user hovers on the chart.

Has anyone identified a method to **dynamically enable hover markers only for specific series**?

DOM Example:

 ![DOM Example](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/2/22262ad79de9849d8787535eba7e01498adadff9.png)

Apexcharts Tooltip Markers Github:

> <https://github.com/apexcharts/apexcharts.js/blob/0e7addc291d4fadbe4aa6f07d682dda106f3ebf1/src/modules/tooltip/Marker.js>

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 15, 2025, 5:33pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/2 "2025-10-15T17:33:40Z")

</div>

Can you provide an example view?

I think I can follow what you’re after, but an example would help.

---

<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:** [October 15, 2025, 7:02pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/3 "2025-10-15T19:02:41Z")

</div>

> [@bmusson](#):
>
> Can you provide an example view?  
> I think I can follow what you’re after, but an example would help.

This view shows a snippet of the line chart, where you see some annotation colors with 6 distinct markers appearing when a user hovers over the chart. I want only the blue (data) marker to appear while the other 5 (control lines) are hidden.

> [@nolan.pratt](#):
>
> My goal is to control which series display these markers on hover, allowing only certain series to show the circular marker when the tooltip is active, rather than every series on the graphic.
> 
> Chart Example:
> 
> ![Chart Example](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/786e1d9e142ba15a7bf1ac8fcae0516d71af6dee.png)

Here's a full chart for reference:

 ![Example Chart](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/9662808d1053780d03934d483bb88a1235cbe4fd.png)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 15, 2025, 7:20pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/4 "2025-10-15T19:20:01Z")

</div>

> [@nolan.pratt](#):
>
> This view shows a snippet of the line chart

I may have been unclear, could you post the `view.json` with some static data? Something that I can play with without needing to recreate your setup from scratch.

---

<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:** [October 16, 2025, 11:36am UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/5 "2025-10-16T11:36:56Z")

</div>

> [@bmusson](#):
>
> I may have been unclear, could you post the `view.json` with some static data? Something that I can play with without needing to recreate your setup from scratch.

[view.json](https://forum.inductiveautomation.com/uploads/short-url/5DR4AmPBtnALEF2wiYwpsxkDf6C.json) (183.7 KB)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 16, 2025, 10:14pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/6 "2025-10-16T22:14:57Z")

</div>

You're right, this is tricky. The only option I can come with it to draw the marker/markers yourself during the tooltip render.

This example gets the `(x, y)` position of the value for the hovered point in series 5, then draws a red circle on it. It also applies a basic transition in order to match the effect of the standard ApexCharts markers.

```js
// tooltip.custom
function ({ series, seriesIndex, dataPointIndex, w }) {
    const hoverX = w.globals.seriesX[seriesIndex][dataPointIndex];
    const hoverIndexes = w.globals.seriesX.map((seriesX) => {
        return seriesX.findIndex((x) => x === hoverX);
    });

    const targetSeriesIndex = 5;
    const chartEl = w.globals.dom.Paper.node;

    // Find the target X/Y value for the marker
    if (w.globals.seriesX[targetSeriesIndex] && w.globals.seriesX[targetSeriesIndex].length > 0) {
        const targetIndex = hoverIndexes[targetSeriesIndex];
        if (targetIndex >= 0) {
            const xValue = w.globals.seriesXvalues[targetSeriesIndex][targetIndex];
            const yValue = w.globals.seriesYvalues[targetSeriesIndex][targetIndex];

            // Offset for chart inner plot area
            const offsetX = w.globals.translateX;
            const offsetY = w.globals.translateY;

            const x = offsetX + xValue;
            const y = offsetY + yValue;

            // Reuse existing marker if available
            let marker = document.getElementById('hover-marker');
            if (!marker) {
                marker = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                marker.setAttribute('id', 'hover-marker');
                marker.setAttribute('r', '6');
                marker.setAttribute('fill', 'red');
                marker.setAttribute('stroke', 'white');
                marker.setAttribute('stroke-width', '2');
                marker.style.pointerEvents = 'none';

                // Add a smooth transition (CSS-based)
                marker.style.transition = 'cx 0.25s ease, cy 0.25s ease';

                chartEl.appendChild(marker);
            }

            // Update position smoothly
            marker.setAttribute('cx', x);
            marker.setAttribute('cy', y);
        }
    }

    // Build tooltip HTML
    let html = '<ul class="psc-apexcharts-custom-tooltip">';
    hoverIndexes.forEach((hoverIndex, sIdx) => {
        if (hoverIndex >= 0 && !w.globals.collapsedSeriesIndices.includes(sIdx)) {
            const pt = w.config.series[sIdx].data[hoverIndex];
            if (pt && pt.sn) {
                html += `
                <li class="psc-apexcharts-custom-tooltip-content">
                    <div class="psc-tooltip-value">${w.globals.seriesNames[sIdx]}-Metric: ${pt.y}</div>
                    <div class="psc-tooltip-sn">Serial: ${pt.sn}</div>
                </li>`;
            }
        }
    });
    html += '</ul>';
    return html;
}

```

You can use this approach to render whatever you want as your marker 😆

PS: @nminchin this would probably make a good Wiki entry.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 16, 2025, 11:07pm UTC](https://forum.inductiveautomation.com/t/apexcharts-custom-tooltip-behavior/111472/7 "2025-10-16T23:07:15Z")

</div>

I think you're the best to describe how this wizardry works 😂