Do not draw line on condition in ChartJS line chart

Question

I would like not draw line between two dots when a condition is triggered.

I'm using chartjs a time line graph.

My condition is not to draw line when y value decreases so in this example when it passes from 7 to 1

{x:3.5*3600, y:7},
Do not draw line between these two points
{x:4*3600, y:1},

Is it possible to do with chartjs line time graph?

 var canvas = document.getElementById('myChart'); var config = { "options": { "scales": { "xAxes": [ { "type": 'time', "time": { "unit": 'minute', "unitStepSize": 60, }, "distribution": 'linear', "bounds": 'ticks', "ticks": { "source": 'auto', "autoSkip": true, "stepSize": 10 } } ], }, }, "data": { "labels": ['2016-04-18T00:00:00Z', '2016-04-18T23:59:00Z'], "datasets": [ { "label": "line", "type": "line", "backgroundColor": "#00b", "borderColor": "#00b", //"yAxisID": "axis4", "borderWidth": 1, "fill": false, "data": [ {x:"2016-04-18T01:00:00Z", y:1}, {x:"2016-04-18T04:00:00Z", y:2}, {x:"2016-04-18T06:00:00Z", y:3}, {x:"2016-04-18T08:00:00Z", y:7}, {x:"2016-04-18T10:00:00Z", y:1}, {x:"2016-04-18T14:00:00Z", y:3}, ] }, ] }, }; var myBarChart = Chart.Line(canvas, config);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script> <canvas id="myChart" width="400" height="200"></canvas>

Update I have tried to add {x:null,y:null} or null between the two items but I get this error

Error: 0 and 1461023970000 are too far apart with stepSize of 60 minute

In my options I have:

"data": [
  {x:"2016-04-18T01:00:00Z", y:1},
  {x:"2016-04-18T04:00:00Z", y:2},
  {x:"2016-04-18T06:00:00Z", y:3},
  {x:"2016-04-18T08:00:00Z", y:7},
  {x:null,y:null},
  {x:"2016-04-18T10:00:00Z", y:1},
  {x:"2016-04-18T14:00:00Z", y:3},
]

...

xAxes: [
    {
      type: 'time',
      time: {
        unit: 'minute',
        unitStepSize: 60,
        parser: function(date) {
          return moment(date).toLocaleString();
        }
      },
      distribution: 'linear',
      bounds: 'ticks',
      ticks: {
        source: 'auto',
        autoSkip: true,
        stepSize: 10
      }
    }
  ],

It's like chartjs considering null to be a big value

Answer 1

As explained in the Chart.js documentation (see spanGaps ), if spanGaps is falsy (as default), points with NaN data will create a break in the line.

So, the trick is to insert an empty point, as you tried to do. This empty point must be timestamped, with a timestamp between the two points defining the "hole" in the line:

"data": [
  {x:"2016-04-18T01:00:00Z", y:1},
  {x:"2016-04-18T04:00:00Z", y:2},
  {x:"2016-04-18T06:00:00Z", y:3},
  {x:"2016-04-18T08:00:00Z", y:7},
  {x:"2016-04-18T08:00:00Z", y:null}, // or NaN
  {x:"2016-04-18T10:00:00Z", y:1},
  {x:"2016-04-18T14:00:00Z", y:3},
]

See this fiddle as example: https://jsfiddle.net/t1s54gdh/

Answer 2

Set y as null while still defining the x co-ordinate.

"data": [
  {x:"2016-04-18T01:00:00Z", y:1},
  {x:"2016-04-18T04:00:00Z", y:2},
  {x:"2016-04-18T06:00:00Z", y:3},
  {x:"2016-04-18T08:00:00Z", y:7},
  {x:"2016-04-18T08:00:01Z", y:null},
  {x:"2016-04-18T10:00:00Z", y:1},
  {x:"2016-04-18T14:00:00Z", y:3},
]