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:
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:
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:
Apexcharts Tooltip Markers Github:
