[Chartjs]-Connecting points between missing data in chart.js

by

6👍

✅

I had the same problem and i’ve modified this version like this:

                    var lastPoint = null;
                helpers.each(dataset.points, function (point, index) {

                    if (!point.ignore && dataset.skipNullValues && lastPoint) {
                        ctx.beginPath();
                        ctx.moveTo(lastPoint.x, lastPoint.y);

                        if (this.options.bezierCurve) {
                            ctx.bezierCurveTo(
                                lastPoint.controlPoints.outer.x,
                                lastPoint.controlPoints.outer.y,
                                point.controlPoints.inner.x,
                                point.controlPoints.inner.y,
                                point.x,
                                point.y
                            );
                        } else {
                            ctx.lineTo(point.x, point.y);
                        }
                        ctx.stroke();
                    }

                    if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
                        if (this.options.bezierCurve) {
                            ctx.bezierCurveTo(
                                dataset.points[index - 1].controlPoints.outer.x,
                                dataset.points[index - 1].controlPoints.outer.y,
                                point.controlPoints.inner.x,
                                point.controlPoints.inner.y,
                                point.x,
                                point.y
                            );
                        }
                        else {
                            ctx.lineTo(point.x, point.y);
                        }

                        lastPoint = point;
                    }
                    else if (index === 0 || !point.ignore) {
                        ctx.moveTo(point.x, point.y);

                        if (!point.ignore) {
                            lastPoint = point;
                        }
                    }

                }, this);

For a better structure i have set a property for the dataset called “skipNullValues”:

            var datasetObject = {
                label: dataset.label || null,
                fillColor: dataset.fillColor,
                strokeColor: dataset.strokeColor,
                pointColor: dataset.pointColor,
                pointStrokeColor: dataset.pointStrokeColor,
                tooltip: dataset.tooltip,
                line: dataset.line,
                fill: dataset.fill,
                points: [],
                skipNullValues: dataset.skipNullValues
            };

Here is the full working version!

Maybe there is a better solution, but for my uses it works.

Let me know if it is working for you!

77👍

New version supports skipping missing data.
You can set spanGaps: true in the options.
Then if you have null or NaN for missing data, it will skip it and connect to the next point.

.....
showTooltips: true,
options: {
    spanGaps: true,
    .....
}
.....

Documentation here

16👍

For charts.js v2, you just define it in the dataset:

var data = {
labels: labels,
datasets: [ {
    backgroundColor: "#94b5c244",
    borderColor: "#94b5c2",
    data: data,
    label: "AAPL",
    spanGaps: true
}]
};

2👍

For charts.js v2

Use the plugin hooks.
The following seems to work pretty well for data returning null. It will draw the line with out the point. It connect points though null values.

Chart.pluginService.register({
        beforeDatasetsDraw: function(chart) {
            for (dataset of chart.config.data.datasets) {
                for(data of dataset._meta[chart.id].data) {
                    data._model.skip = false;
                    data._model.tension = 0;
                }
            } 
        }
    });

I am not too exited about a double for loop. This can possibly be more efficient. Perhaps there is also more proper hooks to use. However, this should do what you need.

See
https://github.com/chartjs/Chart.js/blob/master/docs/09-Advanced.md

Leave a comment