HC connectNull Demo

author(s): Marc

by Ashish

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({
 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: false,
	   showInLegend: false, 
	  
	  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]
		],
		dataLabels: {
          enabled: true,
        },     
     
    }],
  });
});