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

var data = [
  [Date.UTC(2016, 1, 1), null],
  [Date.UTC(2016, 2, 1), null],
  [Date.UTC(2016, 3, 1), 500],
  [Date.UTC(2016, 4, 1), 600],
  [Date.UTC(2016, 5, 1), null],
  [Date.UTC(2016, 6, 1), 700],
  [Date.UTC(2016, 7, 1), null],
  [Date.UTC(2016, 8, 1), null],
  [Date.UTC(2016, 9, 1), null],
  [Date.UTC(2016, 10, 1), null],
  [Date.UTC(2016, 11, 1), null],
  [Date.UTC(2017, 0, 1), 500]
];

function buildZones(data) {
  var zones = [],
      i = -1, len = data.length, current, previous, dashStyle, value, fillColor;

  while (data[++i][1] === null);
  zones.push({
    value: data[i][0]
  });

  while (++i < len) {
    previous = data[i - 1][1];
    current = data[i][1];
    dashStyle = '';

    if (previous !== null && current === null) {
      dashStyle = 'solid';
      value = data[i-1][0];
    } else if (previous === null && current !== null) {
      dashStyle = 'dot';
      value = data[i][0];
    }

    if (dashStyle) {
      zones.push({
        dashStyle: dashStyle,
        value: value
      });
    }
  }
  return zones;
}

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'area'
    },
    title: {
      text: 'DottedLineWithNulls'
    },
    subtitle: {
      text: 'How can I connect the null values with a dotted line'
    },
    xAxis: {
      lineColor: '#c5c4c4',
      type: 'datetime', // Added to convert UTC to actual date
      tickInterval: 30 * 24 * 3600 * 1000,
      min: Date.UTC(2016, 0, 1),
      max: Date.UTC(2017, 0, 31),
      gridLineWidth: 0,
      tickLength: 0,
      showFirstLabel: false
    },
    yAxis: {
      gridLineColor: '#c5c4c4',
      //opposite: false,
      title: {
        text: null
      },
      tickPositions: [0, 579, 669, 739, 799, 850],
      min: 300,
      max: 850,

      showFirstLabel: false,
      gridLineWidth: 1,
    },
    series: [{
      connectNulls: true,
      showInLegend: false,
      zones: buildZones(data),
      zoneAxis: 'x',
      data: data,
      dataLabels: {
       ...