title: How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?
body: <p>Using Highcharts ...
  I have a series of values that corresponds with a series of times. Sometimes, the data value is <code>null</code> on a specific time and no marker is placed on the chart, which is good, but the line gets interrupted and basically starts a new chart on the next value that is not <code>null</code>.</p>
  
  <p>I would like to skip the <code>null</code> values on the chart, but still keep the time values and just connect the last non-null value to the next with a solid line.</p>
  
  <ul>
  <li><p>I have tried skipping the entire index if the value is <code>null</code>, but then the time value is skipped as well.</p></li>
  <li><p>I have replaced the <code>null</code> with <code>0</code>, but obviously then the data points lands on the 0-axis.</p></li>
  </ul>
  
  <p>This is my data:</p>
  
  <pre><code>for (i = 0; i &lt; tpoints.length; i++)
      {
          var tc = cpoints[i];
          var tf = fpoints[i];
          var t = tpoints[i];
          labels.push(t);
          c.push(tc);
          f.push(tf);
      }
  </code></pre>
  
  <p>This is my chart config:</p>
  
  <pre><code>var config = {
          type: 'line',
          fill : false,
          data: {
              datasets: [{
                      data: f,
                      backgroundColor: [
                          color(window.chartColors.red).alpha(0.5).rgbString(),
                      ],
                      label: '',
                      fill : false
                  },{
                      data: c,
                      backgroundColor: [
                          color(window.chartColors.blue).alpha(0.5).rgbString(),
                      ],
                      label: '',
                      fill : false
                  }],
              labels: labels
          },
          options: {
              maintainAspectRatio: false,
              responsive: true,
              title: {
                  display: true,
                  text: title,
                  fontSize: 22
              },
              legend: {
                  position: "bottom",
                  display: false
              },
              scales: {
                  yAxes: [{
                          display: true,
                          scaleLabel: {
                              display: true,
                              labelString: 'T'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
              }
          }
      };
  </code></pre>
  
  <p>This creates the line-chart as expected (<strong>Color dots for each data point. Each data dot is then connected with a thin grey line.</strong>), but somewhere in the middle of the chart, if it receives a <code>null</code> value, the grey line gets cut and only displays again between two non-null values.</p>
  
  <p><strong>Any ideas on how i can connect the data point before the <code>null</code> with the data point after the <code>null</code>?</strong></p>