score:5

Accepted answer

You can't call click event of 'container' div because all the child element of 'container' div preventing click event bubbling up the DOM tree.

So you have to call mousedown event instead of click.

$(function() {
    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'}]
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},
        {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]},
        {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]},
        {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]
    });
    });
    $("html").click(function() {
       $(".popupBox").hide();
    });
    $(".popup").click(function(e) {
       e.stopPropagation();
       $(".popupBox").toggle();
    });
    $("#container").mousedown(function(e) {
       $(".popupBox").hide();
    });
});​

Demo

score:1

Its not about script refrence. Its about chart click event. I added click event to chart and it works.

 chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25,

            renderTo: 'container',
            events: {
                click: function(event) {
                    $(".popupBox").hide();
                }

            },
        },

http://jsfiddle.net/3jLtE/18/

score:2

You can handle this in the mousedown event of the chart container

$("#container").mousedown(function(){
      $(".popupBox").hide();      
});

This will be triggered on any mousebutton, you can check the button and handle as you wish using the which property of the eventObject passed on to the handler

$("#container").mousedown(function(e){
      if(e.which==1){ // Only on left click
         $(".popupBox").hide();      
      }
});

Handling chart container click event | Highchart & Highstock
Updated demo


Related Query