bubbles and arrow

HTML

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

JavaScript

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


    var x1 = 500,
        y1 = 100,
        radius1 = 50,
        x2 = 400,
        y2 = 400,
        radius2 = 25;

    renderer.circle(x1, y1, radius1).attr({
        fill: '#FCFFC5',
        stroke: 'black',
            'stroke-width': 1
    }).add();
    renderer.circle(x2, y2, radius2).attr({
        fill: '#FCFFC5',
        stroke: 'black',
            'stroke-width': 1
    }).add();

    drawArrow(x1, y1, radius1, x2, y2, radius2, 20);

    /*  renderer.path(['M', x1, y1, 'L', x2, y2])
        .attr({
        'stroke-width': 1,
        stroke: 'black'
    }).add();
    */

    function drawArrow(startX, startY, startRadius, endX, endY, endRadius, width) {

        var angle = Math.PI + Math.atan((endX - startX) / (endY - startY)),
            arrowLength = 3 * width,
            arrowWidth = 1.5 * width,
            path = [],
            startArrowX,
            startArrowY,
            margin = 5;

        if (endY >= startY) {
            //correct for circle radius
            startX -= ((startRadius + margin) * Math.sin(angle));
            startY -= ((startRadius + margin) * Math.cos(angle));
            endX += ((endRadius + margin) * Math.sin(angle));
            endY += ((endRadius + margin) * Math.cos(angle));

            //correct for arrow head length
            endX += (arrowLength * Math.sin(angle));
            endY += (arrowLength * Math.cos(angle));

            //draw arrow head
            path.push('M', endX, endY);
            path.push(
                'L',
            endX - arrowWidth * Math.cos(angle),
            endY + arrowWidth * Math.sin(angle));
            path.push(
            endX - arrowLength * Math.sin(angle),
            endY - arrowLength * Math.cos(angle));
            path.push(
            endX + arrowWidth * Math.cos(angle),
            endY - arrowWidth * Math.sin(angle), 'Z');
        } else {
           ...