Highcharts Flag Series needs to overlay plot border along the top of the chart

by

I am looking to have a flag series that is at the top of all of the plotLines I have in my chart which would overlay the top edge of the chart. I have gone into the Chrome DevTools and manually changed almost every component within the highcharts component to have overflow: visible set on it and I still could not accomplish this. I have played around with the overflow option that is in several different chart options objects as well as messing with different z-index settings. The end goal of this is to show our end-users a easy-to-see tie between the plotLines and data that we are displaying in a table for notifications and move the tooltip from the plotLines themselves to the flag series tooltip through using the same SVG icon we have set in the table with the different lines (Red and Orange in this instance).
Here is my demo of a simple version 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 search through stack overflow many separate times and there seems to be no question regarding this. The best I found was an old Github issue describing what I am trying to accomplish as a bug.

Leave a Comment