For drawing cirlce you can use SVGRenderer inside events.
chart: {
height: 600,
events: {
load: function() {
let chart = this;
chart.myCustomCircle = chart.renderer.circle(chart.plotLeft + chart.plotWidth / 2, chart.plotTop + chart.plotHeight / 2, Math.min(chart.plotWidth / 2, chart.plotHeight / 2)).attr({
dashstyle: 'Dot',
fill: 'transparent',
stroke: 'green',
'stroke-width': 0.1
}).add();
},
redraw: function() {
let chart = this,
yAxis = chart.yAxis[0],
yMax = yAxis.dataMax;
if (chart.myCustomCircle) {
chart.myCustomCircle.attr({
x: chart.plotLeft + chart.plotWidth / 2,
y: chart.plotTop + chart.plotHeight / 2,
r: Math.min(chart.plotWidth / 2, chart.plotHeight / 2)
});
}
}
},
https://jsfiddle.net/BlackLabel/6am2ojxc/
The next suggestion is to use xAxis.plotBands, with customization core code, it's possible to set plotBands related to series color.
xAxis: {
plotBands: [{
color: 'cyan',
from: -0.5,
to: 0.5,
outerRadius: '110%',
innerRadius: '100%'
}, {
color: 'blue',
from: 0.5,
to: 1.5,
outerRadius: '110%',
innerRadius: '100%'
},
{
color: 'red',
from: 1.5,
to: 2.5,
outerRadius: '110%',
innerRadius: '100%'
},
{
color: 'green',
from: 2.5,
to: 3.5,
outerRadius: '110%',
innerRadius: '100%'
},
{
color: 'yellow',
from: 3.5,
to: 4.5,
outerRadius: '110%',
innerRadius: '100%'
},
{
color: 'orange',
from: 4.5,
to: 5.5,
outerRadius: '110%',
innerRadius: '100%'
}
]
},
https://jsfiddle.net/BlackLabel/prmhku7j/