edit: here is a version with the fill working

so one way to do it would be to extend the line graph. the only prob is you have to override the entire initialise method just to allow all the points to be stored correctly. here is a fiddle showing a custom line graph that does what you describe

the important bits that have been altered from the original line graph i have placed large comment blocks over so here are the highlights, in the example o have used null to represent gaps but this could just be swapped for -1

in the initialize method the data is processed and turned in to the points, this is where the change needs to happen to allow the missing data to still be included

helpers.each(, function(datapoint, index) {
     * check for datapoints that are null
    if (helpers.isnumber(datapoint) || datapoint === null) {
        //add a new point for each piece of data, passing any required data to draw.
        datasetobject.points.push(new this.pointclass({
             * add ignore field so we can skip them later
            ignore: datapoint === null,
            value: datapoint,
            label: data.labels[index],
            datasetlabel: dataset.label,
            strokecolor: dataset.pointstrokecolor,
            fillcolor: dataset.pointcolor,
            highlightfill: dataset.pointhighlightfill || dataset.pointcolor,
            highlightstroke: dataset.pointhighlightstroke || dataset.pointstrokecolor
}, this);

then in the draw method whenever we are at a data point we want to ignore or just past one we move the pen rather than drawing

    helpers.each(dataset.points, function(point, index) {

     * no longer draw if the last point was ignore (as we don;t have anything to draw from)
     * or if this point is ignore
     * or if it's the first
    if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
        if (this.options.beziercurve) {
                dataset.points[index - 1].controlpoints.outer.x,
                dataset.points[index - 1].controlpoints.outer.y,
        } else {
            ctx.lineto(point.x, point.y);
    } else if (index === 0 || dataset.points[index - 1].ignore) {
        ctx.moveto(point.x, point.y);

}, this);

only issue with this was the fill looked proper funky so i commented it out and it's just a line graph now.


this can now be achieved by setting the spangaps property to true in the dataset array.

Related Query

More Query from same tag