HC connectNull Demo

author(s): Marc

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

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

JavaScript

$(function() {
  var data = [null, 5, null, null, 3, 4, null, 1, 5, null, 4, null];

  function buildZones(data) {
    var zones = [],
        i = -1, len = data.length, current, previous, dashStyle, value;
    
    while (data[++i] === null);
    zones.push({
      value: i
    });

    while (++i < len) {
      previous = data[i - 1];
      current = data[i];
      dashStyle = '';
    
      if (previous !== null && current === null) {
        dashStyle = 'solid';
        value = i - 1;
      } else if (previous === null && current !== null) {
        dashStyle = 'dot';
        value = i;
      }
      
      if (dashStyle) {
        zones.push({
          dashStyle: dashStyle,
          value: value
        });
      }
    }
    
    return zones;
  }

  $('#container').highcharts({
    title: {
      text: 'DottedLineWithNulls'
    },
    subtitle: {
      text: 'How can I connect the null values with a dotted line'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      zones: buildZones(data),
      zoneAxis: 'x',
      data: data,
      connectNulls: true
    }]
  });
});