Highchart: Flags goes out of stock chart on set extreme - highcharts

Question

As highchart provides great features of charting, we have incorporated Highchart library in our web application.
As per the requirement we have to display flags on specific datapoints. So I am using flags series to achieve the same as mentioned below:
series: [{
name: 'USD to EUR',
data: [{
y: 1,
x: Date.UTC(2017, 5, 12)
},
{
y: 3,
x: Date.UTC(2017, 6, 13)
},
{
y: 5,
x: Date.UTC(2017, 7, 14)
},
{
y: 7,
x: Date.UTC(2017, 8, 15)
},
{
y: 9,
x: Date.UTC(2017, 9, 16)
},
{
y: 11,
x: Date.UTC(2017, 10, 17)
},
{
y: 13,
x: Date.UTC(2017, 11, 18)
},
{
y: 15,
x: Date.UTC(2017, 12, 19)
},
{
y: 17,
x: Date.UTC(2018, 1, 20)
},
{
y: 19,
x: Date.UTC(2018, 2, 21)
}
],
id: 'dataseries'
// the event marker flags
}, {
type: 'flags',
y: -5,
data: [{
x: Date.UTC(2017, 5, 12),
title: ' '
},
{
x: Date.UTC(2017, 6, 13),
title: ' '
},
{
x: Date.UTC(2017, 7, 14),
title: ' '
},
{
x: Date.UTC(2017, 8, 15),
title: ' '
},
{
x: Date.UTC(2017, 9, 16),
title: ' '
},
{
x: Date.UTC(2017, 10, 17),
title: ' '
},
{
x: Date.UTC(2017, 11, 18),
title: ' '
},
{
x: Date.UTC(2017, 12, 19),
title: ' '
},
{
x: Date.UTC(2018, 1, 20),
title: ' '
},
{
x: Date.UTC(2018, 2, 21),
title: ' '
}
]
But when series is plotted with flags and when I set extremes on Y-Axis, this symbols goes out of chart as shown in below image:
Is there any work around to fix this issue ?
Here is the JS Fiddle.

Answer 1

Issue reported in Highcharts github, marker as a bug: https://github.com/highcharts/highcharts/issues/8546
Workaround:
chart: {
events: {
load: function() {
this.series[1].markerGroup.clip(this.clipRect); // series[1] -> index of flag series
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/md82wpfk/8/