Highcharts: Add circle to scatter plot

Question

I would like to draw a circle on a scatter plot to highlight values outside of the acceptable range.

I tried to use chart.renderer.circle but that uses the x and y pixels of the SVG element. I still want to be able to zoom in or out, so absolute x and y values don't work.

Is this possible with Highchart?

Added Mockup: 添加了样机：

Answer 1

Two ideas...

ONE

Use chart.renderer.circle and translate the point values to pixels.

Say you want to draw a circle at:

var circleX = 161.2;  // x coordinate
var circleY = 51.6; // y coordinate
var circleR = 1.0;  // radius size in terms of x axis distance

Draw the circle as:

function addCircle(chart){
    if (this.circle){
        // on a redraw, remove old circle
        $(this.circle.element).remove();
    }

    // translate my coordinates to pixel values
    var pixelX = chart.xAxis[0].toPixels(circleX);
    var pixelY = chart.yAxis[0].toPixels(circleY);
    var pixelR = chart.xAxis[0].toPixels(circleR) - chart.xAxis[0].toPixels(0);        

    // add my circle
    this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
        fill: 'transparent',
        stroke: 'black',
        'stroke-width': 1
        });
    this.circle.add();        
}

You then call this in the load and redraw events and all is awesome:

        events: {
            load: function(){
               addCircle(this); 
            },
            redraw: function(){
               addCircle(this);
            }
        }

Here's a fiddle example .

TWO

Add the circle as another series, make the marker a giant transparent circle:

    {
        data: [[circleX, circleY]],
        linkedTo: 'other', // link it to other series to avoid legend entry
        marker: {
            radius: 40,
            lineColor: 'red',
            fillColor: 'transparent',
            lineWidth: 1,
            symbol: 'circle'
        }
    }

Here's a fiddle for this one.