Empty / Null Data Points in Chart | CanvasJS JavaScript Charts

Overview – Empty / Null Data Points in Chart

Empty or Null dataPoints are points with no Y value. These are used in cases where values are not available for a specific x value. In cases of charts that require axis (line, area, bar, etc), null dataPoints introduce an empty space or gap and in case of other chart types (pie, doughnut) only labels show up at corresponding position. Empty dataPoints are sometimes referred to as missing dataPoints. Below are some of the examples for empty / null dataPoints.

Note

You can change this behavior to draw a line wherever null dataPoints are present by setting connectNullData to true.

You can further modify the line dashtype using null-dataLineDashType.

Line Chart with null / empty data point.

Note that the line breaks at the point where empty data point is present and they don’t appear in the toolTip

Try Editing The Code

Line Chart with connecting lines when there are null-data-points.

Note that the line breaks are replaced with dotted line at the point where empty data point is present.

Try Editing The Code

Spline Area Chart with Missing Data Point

Try changing the chart type to any of the other supported chart type to see how they behave.

Try Editing The Code

If you have any questions, please feel free to ask in our forums.Ask Question

10 Comments

Pingback: CanvasJS Version 1.4 Beta with StripLines, Legend Events & Empty Data Points in Chart | CanvasJS
Rafael Oliveira says:

August 6, 2015 at 10:36 pm

Hi, my graph is Date and time Axis, but when i have interval
between the data, i would like empty data point between two points.

the way this the line there is not points in that interval
getting bad viewing.

Thanks!
Pruthvi Kumar says:

January 7, 2016 at 12:21 pm

HI,

Facing deadline of delivery. Please assist ASAP. When the data points are broken or contains null, I dont want the chart to look broken. It needs to continue from its previous point. So that the line looks continuous. Is that possible? Please share a fiddle if you already have examples.

Please help asap.

Thank you,
Pruthvi
Pruthvi Kumar says:

January 7, 2016 at 12:23 pm

Facing deadline of delivery. Please assist ASAP. When the data points are broken or contains null, I dont want the chart to look broken. It needs to continue from its previous point. So that the line looks continuous. Is that possible? Please share a fiddle if you already have examples.

Please help asap.

Thank you,
Pruthvi
- Vishwas says:
  
  January 7, 2016 at 7:46 pm
  
  Pruthvi,
  
  Best way to do this is to check dataPoints for null value and not add them to the series.
  - Pruthvi says:
    
    January 7, 2016 at 7:49 pm
    
    Thanks Vishwas. I did tht eventually. But it ll b nice if the library comtains tht check. I just altered their source.
    - Vishwas says:
      
      January 8, 2016 at 11:31 am
      
      Thanks for your suggestion. We’ll consider it in future.
- Vishwas R says:
  
  May 11, 2016 at 6:05 pm
  
  Pruthvi,
  
  We released v1.8.1 Beta 2 with connectNull property for all line and area charts. You can connect non-null dataPoints ignoring null values.
Mak says:

July 16, 2016 at 2:30 pm

I don’t want to show null data in candle stick chart.. What is the best solution to not include that data in chart and continues from last data ??
- Vishwas R says:
  
  July 19, 2016 at 12:09 pm
  
  Mark,
  
  Candlestick charts are rendered without null dataPoints and seems to be continuous. Pictorial representation or jsfiddle will help us understand your requirement better and help you out.