[Solved]-Dashed line for missing data in Chart.JS (spanGaps style)-Chart.js

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      let dataset = chart.data.datasets[0];
      var valueFrom = null;
      var valueFromIndex = 0;
      var xFrom = null;
      let yFrom = null;
      ctx.strokeStyle = dataset.borderColor;
      dataset.data.forEach((value, index) => {
        if (value != null) {
          var x = xAxis.getPixelForTick(index);
          var y = yAxis.getPixelForValue(value);
          if (valueFrom != null) {
            ctx.lineWidth = dataset.borderWidth;
            if (index - valueFromIndex > 1) {
              ctx.setLineDash([5, 5]);
            } else {
              ctx.setLineDash([]);
            }
            ctx.beginPath();
            ctx.moveTo(xFrom, yFrom);
            ctx.lineTo(x, y);
            ctx.stroke();
          }
          valueFrom = value;
          valueFromIndex = index;
          xFrom = x;
          yFrom = y;
        }
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C", "D", "E", "F", "G"],
    datasets: [{
      label: 'My Dataset',
      data: [12, 19, null, 3, 6, null, 8],
      backgroundColor: 'rgba(255, 99, 132, 0.6)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 3,
      showLine: false,
    }]
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>