Chart.js gap between points

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


  • Chart.js - y axis custom label
  • How can I show Bootstrap modal when on click in individual bars in chart.js
  • chart.js? Specifically Radar Charta and Negative Numbers
  • Chart.js - draw horizontal line
  • chart.js v2: Align time scale labels with the center of the bars
  • Angular2 Update ng2-charts with labels
  • I have some data for each year:


    -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.

  • Add Commas to ChartJS Data Points
  • How to change grid line width for one specific line
  • Chartjs - pointColor to follow current color of gradient stroke
  • Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
  • Hide labels on x-axis ChartJS
  • Acceptable Range Highlighting of Background in Chart.js 2.0
  • One Solution collect form web for “Chart.js gap between points”

    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.