'Connecting points between missing data in chart.js

I'm using chart.js and I have some missing data between multiple day entries at certain points in my chart. I've assigned these values null, but would like the chart to draw a connection line between the missing points. Here is what I have:

enter image description here

Is there a way to connect the dots in chart.js? Or perhaps someone could point me towards a chart library that can. Thanks.

chart.js


Solution 1:[1]

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

Solution 2:[2]

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
}]
};

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roberto Rossini
Solution 2 Grégoire Gentil
Solution 3 dlz21

Related Questions