Is it possible to make ChartJS process empty values?

For example, there is a list of labels:

`['January','February','March','April','May','June]`

And there is a list of values [1,null,null,5,null,1].

In this case, I want ChartJS to act that there are no values for February,March and May so it draws lines directly between January and April and June.

There are similar questions but they don't want to draw any line under the null values Like this, I want to draw lines between closest not null values.

This is the graph when there are 0s instead of null values.

Is it possible to make ChartJS process empty values?

For example, there is a list of labels:

`['January','February','March','April','May','June]`

And there is a list of values [1,null,null,5,null,1].

In this case, I want ChartJS to act that there are no values for February,March and May so it draws lines directly between January and April and June.

There are similar questions but they don't want to draw any line under the null values Like this, I want to draw lines between closest not null values.

This is the graph when there are 0s instead of null values.

• javascript
• jquery
• html
• chart.js

• 1 You could do the linear interpolation yourself. – Pointy Commented Nov 14, 2016 at 15:10
• Beause zero is a correct value so the line is drawn at the bottom of the graph. I've attached a image with the graph when there are those values set to zero. The graph should show trends. – Milano Commented Nov 14, 2016 at 15:12
• Well Chart.js is just not very smart. If you want the line chart to go through points that are not in your real data, you'll have to pute the values with your own code. – Pointy Commented Nov 14, 2016 at 15:23

2 Answers 2

Use the spanGaps option:

var t = ['January', 'February', 'March', 'April', 'May', 'June'];
var vals = [1,null,null,5,null,1];

var chartdata ={
  labels:t,
  datasets :[
  {
    data:vals,
    spanGaps: true
  }
  ]
};

var ctx = document.getElementById("mycanvas").getContext('2d');
var lineGraph = new Chart(ctx,{
  type: 'line',
  data: chartdata
});

Note: You may need to experiment with the line tension and y-axis min and max to get it looking the way you want but this should meet your basic requirements.

You have to first check value for null then assign NaN to it. I solved my issue when i was working on chart.js polar area.

if(value==null)
{
value=NaN;
}