CODEWITHSUNDEEP
javascriptjqueryhtmlchart.js
Milano
Milano

Reputation: 18705

ChartJS: How to add empty 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.

enter image description here

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.

enter image description here

Upvotes: 3

Views: 9270

Answers (2)

techMayu
techMayu

Reputation: 39

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;
}

Upvotes: -1

jeff carey
jeff carey

Reputation: 2373

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.

Upvotes: 6

Related Questions