Draw something under highstock chart navigator

Question

In this example you see that the circle I'am trying to draw doesn't show up correctly, it's not possible to draw anything under the navigator of highstock.

what should I do so I can draw under the navigator ?

renderer.circle(100, 180, 50).attr({
    fill: 'red',
    stroke: 'black',
    'stroke-width': 1,
    zIndex: 3
}).add();

Answer 1

If I understand your question now it is that you want to add some drawn elements below the navigator location (not behind). To do this you would need to play with your chart's size (which you are handling in your div it looks like) and then by adding the following:

chart: {
    renderTo: 'container',
    spacingBottom: 150
},

The spacingBottom (and the other spacing*) options let you format the non-chart chart area spaces.

I did some changes to your jsFiddle to demo one way to accomplish this here.