Render Circle

by Roydon DSouza

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

var renderer;
$(function () {
    renderer = new Highcharts.Renderer(
    $('#container')[0],
    400,
    300);

    renderer.circle(200, 150, 100).attr({
        fill: '#FCFFC5',
        stroke: 'black',
            'stroke-width': 1,
        id: "test",

    }).on('mouseover', function () {
        //Call back for image mouse hover                     
        //Draw a text relative to Image X and Y                                                           
        text = chart.renderer.text("Your tooltip Text", X, Y)
            .add();

        var box = text.getBBox();

        //Now draw a box surrounding the tool tip text                     
        textBG = chart.renderer.rect(box.x, box.y, box.width, box.height, 5)
            .attr({
            fill: '#FFFFEF',
            stroke: 'gray',
                'stroke-width': 1,
            zIndex: 4
        })
            .add();
    })
        .on('mouseout', function () {

        //Call back for mouse out on the image
        //Destroy Both markers text and textBG on mouse out
        //Make text and textBG as global functions for access accross functions 
        text.destroy();
        textBG.destroy();

    }).on('click', function () {
        alert(this.id);
    }).add();
});