Highchart Bubble Line Connected Label

http://stackoverflow.com/questions/27542928/extend-highcharts-renderer-symbols-to-have-plus-sign Jugal Thakkar http://jugal.me/

by Sarah Godoshian

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

CSS

#container {
    min-width:500px;
}
.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

Highcharts.SVGRenderer.prototype.symbols.linepin = function(x, y, w, h, options) {
        var anchorX = options && options.anchorX,
            anchorY = options && options.anchorY,
            path = [],
            labelTopOrBottomY;

        var squarePath = Highcharts.SVGRenderer.prototype.symbols.square(x, y, w, h);

        if (anchorX && anchorY) {
            /**
             * If the label is below the anchor, draw the connecting line
             * from the top edge of the label
             * otherwise start drawing from the bottom edge
             */
            labelTopOrBottomY = (y > anchorY) ? y : y + h;
            path.push(
              'M',
              squarePath[1] + squarePath[4] / 2,
              labelTopOrBottomY,
              'L',
              anchorX,
              anchorY
            );
            path = path.concat(
              Highcharts.SVGRenderer.prototype.symbols.circle(anchorX - 1, anchorY - 1, 2, 2)
            );
        }

        return path;
    };
    if (Highcharts.VMLRenderer) {
        Highcharts.VMLRenderer.prototype.symbols.linepin = Highcharts.SVGRenderer.prototype.symbols.linepin;
    }
Highcharts.chart('container', {

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    legend: {
        enabled: false
    },

    title: {
        text: 'Sugar and fat intake per country'
    },

    subtitle: {
        text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
    },

    xAxis: {
        gridLineWidth: 1,
        title: {
            text: 'Daily fat intake'
        },
        labels: {
            format: '{value} gr'
        },
        plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 65,
            label: {
                rotation: 0,
                y: 15,
                style: {
                    fontStyle: 'italic'
              ...