Highcharts Demo

author(s): Torstein Hønsi

HTML

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

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'The line is connected from April to Juni, despite the null value in May'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                connectNulls: true,
                
            },
        },
        tooltip: {
             shared:true,
            
            formatter: function(){
                var points = this.points;
                var seriesName = points[0].series.name;
                if(seriesName == 'fake')
                    return "Null tooltip";
                return seriesName+"<br>value: <b>"+this.y+"</b>";
            }
        },
        series: [{
            type:'areaspline',
            data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
        },
                 {
                     type:'spline',
                     lineWidth:0,
                     name:'fake',
                     showInLegend:false,
                     marker:{
                         symbol:'circle',
                         radius:0,
                     }
                 }
           ]

    }, function(chart){
        var series = chart.series[0];
        var fake_series = chart.series[1];
        $.each(series.data, function(i){
            var point = this;
            var nextPoint = series.data[i+1] != undefined ? series.data[i+1].y : 0;
            var prevPoint = series.data[i-1] != undefined ? series.data[i-1].y : 0;
            if(series.data[i].y == null)
                fake_series.addPoint([series.data[i].x, (nextPoint+prevPoint)/2]);
        });
    });
});