CODEWITHSUNDEEP
javascriptnullchart.jsbreak
Yvan
Yvan

Reputation: 1121

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

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/

Upvotes: 3

Views: 11683

Answers (2)

henon
henon

Reputation: 2501

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.

Upvotes: 7

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 9

Related Questions