Question

The API doesn’t show a proper example how to use connectNulls property. I had a few attempts but no luck. Here is what I have:

Attempt 1:

plotOptions : 
{   
   line: { connectNulls : true}
},

This results in: TypeError: Cannot read property 'x' of undefined

Attempt 2:

plotOptions : 
{   
    series: 
    { 
        gapSize: null, 
        line: { connectNulls : true} 
    }
},

This doesn’t give me any errors, so I assume this is closest to be the correct way, however nothing changes: the points from either side of null points are not connected.

Can anyone share a code snipped that shows the correct way of doing it?

Answer 1

The highcharts API has two examples for the connectNulls property: one for true, and one for false.

http://api.highcharts.com/highcharts#series.connectNulls

The true example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/

A snippet from the true example:

   plotOptions: {
        series: {
            connectNulls: true
        }
    },

The false example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/

A snippet from the false the example:

plotOptions: {
    series: {
        // connectNulls: false // by default
    }
},

The default of false is a thoughtful choice, because when you connect values when there is no data, the results can lead to false assumptions on the part of the viewer of the chart.

UPDATE

Here’s a Highstock example:

$(function() {

        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
             connectNulls: true, 
                data : [
  [1112832000000,43.56],
[1112918400000,43.74],
[1113177600000,41.92],
[1113264000000,null],
[1113350400000,null],
[1113436800000,37.26],
[1113523200000,35.35],
[1113782400000,35.62],
[1113868800000,37.09],
[1113955200000,35.51],
[1114041600000,37.18],
[1114128000000,35.50],
[1114387200000,36.98],
[1114473600000,36.19],
[1114560000000,35.95],
[1114646400000,35.54],
        [1114732800000,36.06]          
        ],
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });

});