Highcharts Demo

author(s): Torstein Hønsi

by Alexandre Froger

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 460px;width: 100%"></div>

JavaScript

drawElement = function(chart, labelGroup){
    		var point = chart.series[0].points[6];
        var tmpElement = chart.renderer.label(
        '<b>Titre de la bulle</b><br>qsdfqsdfqsdfq sdf qsdf vsdgsd sd sdvs dvsd',
        point.plotX + chart.plotLeft,
        point.plotY + chart.plotTop,
        "callout",
        null,
        null,
        false,
        false)
            .css({
                color: '#FFFFFF',
                width: '100px'
            })
            .attr({
                fill: 'rgba(0, 0, 0, 0.75)',
                padding: 8,
                r: 5,
                zIndex: 6
            })
            .add();
         tmpElement.hide();
         
         tmpElementProperties = tmpElement.getBBox();
         var realElement = chart.renderer.label(
        '<b>Titre de la bulle</b><br>qsdfqsdfqsdfq sdf qsdf vsdgsd sd sdvs dvsd',
        point.plotX + chart.plotLeft - (tmpElementProperties.width/2),
        point.plotY + chart.plotTop - tmpElementProperties.height - 50,
        "callout",
        point.plotX + chart.plotLeft,
        point.plotX + chart.plotLeft,
        false,
        false)
            .css({
                color: 'rgba(0, 0, 0, 0.75)',
                width: '100px'
            })
            .attr({
                fill: 'rgba(255, 255, 255, 1)',
            		'stroke-width': 1.2,
            		stroke: 'rgba(0, 0, 0, 0.25)',
                padding: 8,
                r: 5,
                zIndex: 6
            })
            .add(labelGroup);

						/*realElement.hide();
						var currentRealElementX = realElement.x;
            var currentRealElementY = realElement.y;
            Highcharts.addEvent(point, 'mouseOver', function () {
            var currentTooltipOption = jQuery(".highcharts-tooltip")[0].getBBox();
            	realElement.attr({
                    x: currentRealElementX + currentTooltipOption.width,
                    y: currentRealElementY
              });
            	realElement.show();
     ...