Connect nulls with different series style

author(s): Mike Zavarello

by mahin khan`

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() {
  $('#container').highcharts({
    title: {
      text: 'LineWithNulls'
    },
    subtitle: {
      text: 'How can I connect the the line in a different color or with a dotted line'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      data: [4, 5, 1, null, 3, 4, 2, null, 5, 6],
      connectNulls: false,
      zIndex: 2
    }, {
      /* differently formatted series for "null" values in first series
      prevent from showing up in legend and prevent series from showing in tooltip on mouse over */
      data: [null, null, 0, 0, 0, null, 0, 0, 0, null],
      connectNulls: false,
      color: 'red',
      marker: {
        enabled: false
      },
      lineWidth: 8,
      zIndex: 1,
      showInLegend: false,
      enableMouseTracking: false
    }]
  });
});