Line ChartJS empty / null values doesn't break the line

Question

I want to break the line of the chart when values is null or empty, but I can't. Perhaps I miss something?

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [ {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, null, 80, 81, 56, 55, 40]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, null, 19, null, 27, 90]
    } ]
};

Here is the code: http://jsfiddle.net/YvanBarbaria/sLgefm04/31/

Answer 1

Chart.js doesn't support this directly.

1. You have to disable the default segment drawing and
2. write your own instead

For 1., setting the stroke width to 0 does not work because canvas ignores 0 (and NaN, undefined...), so you set it to a very small value to make the line invisible (there is a datasetStroke option, but there is no code that acts on it yet)

It would be logical to also disable the fill. However, with dataset fill turned off, the points get filled with black color (Chart.js bug?), so make the points solid by reducing the radius and increasing the strokewidth.

var myLineChart = new Chart(ctx).LineAlt(data, {
    datasetStrokeWidth: 0.01,
    datasetFill: false,
    pointDotRadius : 2,
    pointDotStrokeWidth: 3
});

Notice that the type is LineAlt - which is how you take care of the 2. - by extending the Line chart type

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        // now draw the segments
        var ctx = this.chart.ctx
        this.datasets.forEach(function (dataset) {
            ctx.strokeStyle = dataset.strokeColor

            var previousPoint = {
                value: null
            };
            dataset.points.forEach(function (point) {
                if (previousPoint.value !== null && point.value !== null) {
                    ctx.beginPath();
                    ctx.moveTo(previousPoint.x, previousPoint.y);
                    ctx.lineTo(point.x, point.y);
                    ctx.stroke();
                }
                previousPoint = point;
            })
        })
    }
});

Fiddle - http://jsfiddle.net/sLgefm04/66/