My goal is to create a flag series that sits atop all plotLines in my chart, overlaying the top edge of the chart. Despite manually changing various components within the Highcharts component using Chrome DevTools and setting overflow: visible, I have not been able to achieve this effect. I have experimented with the overflow option in different chart options objects and played around with z-index settings, but the desired result still eludes me. The purpose of this is to provide end-users with a clear visual connection between plotLines and data displayed in a table for notifications, as well as relocating the tooltip from the plotLines to the flag series tooltip by utilizing the same SVG icon present in the table with different lines (Red and Orange in this case).
Here is a simple demo of my chart: https://jsfiddle.net/jacobburgo/3sve7x8d/1/
Highcharts.stockChart('container', {
/** options */
series: [
/** 3 other series */
{
type: "flags",
name: "Notifications",
data: flags,
color: "#dddf0d",
linkedTo: ":previous"
}
]
/** more options */
})
I have searched through Stack Overflow multiple times, but there does not seem to be any relevant questions on this topic. The closest I found was an old Github issue discussing what I am attempting to do as a bug.