Line chart with 0 and null value

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/highcharts.js" integrity="sha512-PpL09bLaSaj5IzGNx6hsnjiIeLm9bL7Q9BB4pkhEvQSbmI0og5Sr/s7Ns/Ax4/jDrggGLdHfa9IbsvpnmoZYFA==" crossorigin="anonymous"></script>

JavaScript

let jsonData = [
  [1599575426971, 1],
  [1599578984163, 1],
  [1599579961454, 1],
  [1599580856970, 1],
  [1599580856971, null],
  [1599581021231, 1],
  [1599584414162, 1],
  [1599584414163, null],
  [1599585274150, 1],
  [1599585391453, 1],
  [1599585391454, null],
  [1599585964068, 1],
  [1599586451230, 1],
  [1599586451231, null],
  [1599590704149, 1],
  [1599590704150, null],
  [1599591394067, 1],
  [1599591394068, null],
  [1599592409734, 1],
  [1599593326274, 1],
  [1599593883607, 1],
  [1599597839733, 1],
  [1599597839734, null],
  [1599598756273, 1],
  [1599598756274, null],
  [1599599313606, 1],
  [1599599313607, null]
];

let chartDiv = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(chartDiv);

let seriesData = [];

seriesData.push({
  data: jsonData,
  name: 'Error',
  id: 'Error',
  type: 'line',
  fillOpacity: 0.4,
  step: 'right',
  lineWidth: 5
});

let chart = Highcharts.chart(chartDiv, {
  marker: {
    symbol: 'triangle',
    radius: 20
  },
  chart: {
    marginLeft: 45,
    spacingTop: 15,
    spacingBottom: 15,
    height: 300,
    marginRight: 120,
    zoomType: 'x'
  },
  xAxis: {
    crosshair: true,
    visible: true,
    type: 'datetime'
  },
  yAxis: {
    enabled: false,
    visible: false
  },
  series: seriesData
});