I can't figure out how (or if it is possible) to create a gap in a line chart in chart.js.

Example:

I have some data for each year:

2010|20.3
2011|-1
2012|21.4
2013|26.5

-1 represents a year with no data. In this case there should only be a line connecting 2012 and 2013.

How is that done? I have managed to hide the dot, but I can't hide the lines connecting 2011 without removing the entire line connecting the other dots.

I can't figure out how (or if it is possible) to create a gap in a line chart in chart.js.

Example:

I have some data for each year:

2010|20.3
2011|-1
2012|21.4
2013|26.5

-1 represents a year with no data. In this case there should only be a line connecting 2012 and 2013.

How is that done? I have managed to hide the dot, but I can't hide the lines connecting 2011 without removing the entire line connecting the other dots.

• javascript
• chart.js

3 Answers 3

This can now be achieved by setting the spanGaps property to true in the dataset array.

http://www.chartjs.org/docs/latest/charts/line.html

EDIT: here is a version with the fill working http://jsfiddle.net/leighking2/sLgefm04/6/

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 http://jsfiddle.net/leighking2/sLgefm04/

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(dataset.data, 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) {
            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);
        }
    } 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.

when spanGaps is false for this dataset, a gap is created between 2 points surrounding point(s) with y == null.