Highcharts Custom Tooltip Not Triggering on Vertical Plotline in Stacked Mode

I'm working with the Highcharts library and I'm facing an issue with my custom tooltip. I have a vertical plotline on my graph, and I want the tooltip to show custom text when the user hovers over the plotline. This works perfectly fine in the default mode, but when I switch the chart to stacked mode, the method that renders the tooltip does not get called at all. It seems like the tooltip logic stops triggering specifically in this configuration.

Expected Behavior: When hovering over a vertical plotline, a custom tooltip should appear with text defined by a function. This works as expected in normal chart modes, but breaks when the chart is stacked.

Actual Behavior: The tooltip works as expected outside of stacked mode. In stacked mode, the tooltip function is never triggered, and no tooltip is displayed on hover over the vertical plotline.

Key Points: Issue happens only in stacked mode. The tooltip method is not called when hovering over the plotline in stacked mode. The rest of the chart behaves as expected in stacked mode. Here’s a simplified version of the vertical plotline we had to represent our event:

data: [
{
x: xTick,
y: 0,
dataLabels: { enabled: false }
},
{
dataLabels: {
enabled: true,
allowOverlap: false,
formatter: () => { //translation made here },
},
x: xTick,
y: 1,
},
],
type: 'line',
showInLegend: false,
shadow: false,
color: '#7a8958',
marker: {
enabled: false,
symbol: 'circle',
},
zIndex: numberOfColumns + 1,
tooltip: {
headerFormat: '',
pointFormatter: () => this.getEventsTooltip(events) // the method that is called when not in any stacked mode but not in a stacked mode,
},
}


not in any stacked mode (works properly)

stacked mode (custom tooltip method is not called upon)

Questions and requirements:

Has anyone encountered this issue before with Highcharts and stacked mode?

I have several requirements on this particular feature: I need to able to be hover the vertical line and have a tooltip to make a recap of what my client needs to see and I still need to have normal tooltips on the points of the graph.

Any suggestions or help would be greatly appreciated!

Versions used on this project :

"angular": "17.3.11",
"highcharts": "11.4.8",
"highcharts-angular": "4.0.1",


Here's what I've tried so far:

I've made sure that the plotline is being correctly defined in the chart options, and it displays on the graph.

The tooltip logic works fine in other modes (non-stacked).

I inspected the chart and the event listeners for plotlines, but couldn't figure out why the stacked mode interferes with tooltip rendering.

Only difference between the 2 graphs configuration is one has

stacking": "normal",


the other :

stacking": "",

Continue reading...