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         


        

Answer 1

Maybe this wasn't available back in 2015 but now the line graph has a styling option spanGaps which if true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line.

Answer 2

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/