[Solved]-Not drawing null values using chart.js-Chart.js

breaking (broken) lines using chart.js

you can extend the line chart type to do this

preview

script

chart.types.line.extend({
  name: "linealt",
  initialize: function (data) {
    var fillcolors = [];
    var strokecolors = [];
    data.datasets.foreach(function (dataset, i) {
      if (dataset.data.indexof(null) !== -1) {
        fillcolors.push(dataset.fillcolor);
        strokecolors.push(dataset.strokecolor);
        dataset.fillcolor = "rgba(0,0,0,0)"
        dataset.strokecolor = "rgba(0,0,0,0)"
      }
    })

    chart.types.line.prototype.initialize.apply(this, arguments);

    var self = this;
    data.datasets.foreach(function (dataset, i) {
      if (dataset.data.indexof(null) !== -1) {
        self.datasets[i]._saved = {
          fillcolor: fillcolors.shift(),
          strokecolor: strokecolors.shift()
        }
      }
    })
  },
  draw: function () {
    chart.types.line.prototype.draw.apply(this, arguments);

    // from chart.js library code
    var hasvalue = function (point) {
      return point.value !== null;
    },
    nextpoint = function (point, collection, index) {
      return chart.helpers.findnextwhere(collection, hasvalue, index) || point;
    },
    previouspoint = function (point, collection, index) {
      return chart.helpers.findpreviouswhere(collection, hasvalue, index) || point;
    };

    var ctx = this.chart.ctx;
    var self = this;
    ctx.save();
    this.datasets.foreach(function (dataset) {
      if (dataset._saved) {
        ctx.linewidth = self.options.datasetstrokewidth;
        ctx.strokestyle = dataset._saved.strokecolor;
        ctx.fillstyle = dataset._saved.fillcolor;

        // adapted from chart.js library code
        var pointswithvalues = chart.helpers.where(dataset.points, hasvalue);
        dataset.points.foreach(function (point, index) {
          if (index === 0 || (hasvalue(point) && !hasvalue(dataset.points[index - 1])))
            point.start = true;
        });
        var currentstartpoint = undefined;
        chart.helpers.each(pointswithvalues, function (point, index) {
          if (point.start) {
            if (currentstartpoint) {
              ctx.lineto(pointswithvalues[index - 1].x, self.scale.endpoint);
              ctx.lineto(currentstartpoint.x, self.scale.endpoint);
              ctx.closepath();
              ctx.fill();
            }

            currentstartpoint = point;
            ctx.beginpath();
            ctx.moveto(point.x, point.y);
          }
          else {
            if (self.options.beziercurve) {
              var previous = previouspoint(point, pointswithvalues, index);
              ctx.beziercurveto(
                previous.controlpoints.outer.x,
                previous.controlpoints.outer.y,
                point.controlpoints.inner.x,
                point.controlpoints.inner.y,
                point.x,
                point.y
              );
            }
            else {
              ctx.lineto(point.x, point.y);
            }
          }

          ctx.stroke();
        }, this);

        ctx.lineto(pointswithvalues[pointswithvalues.length - 1].x, self.scale.endpoint);
        ctx.lineto(currentstartpoint.x, self.scale.endpoint);
        ctx.closepath();
        ctx.fill();
      }
    })

    ctx.restore();
  }
});

and then

var data = {
    ...
    datasets: [
        {
            ...
            data: [65, 59, null, 81, 52, 62, null, 56, 40],
        }
    ],
};

...
new chart(ctx).linealt(data);

fiddle - https://jsfiddle.net/hbrhz2q4/