RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

How do I show null values on my Line chart?

Posted by Joachim at 18:53 on Monday 16th August 2021 [link]
searched but could not find a solution for this: How could I setup a line chart wich has null values in its data. The resulting line should not handle null values as it were nummber "0" but rather show a gap and/or connect to the next no-null value.

Posted by Richard at 21:43 on Monday 16th August 2021 [link]
In your data, instead of using zero, you can use the word null. Like this:

new RGraph.Line({
    id: 'cvs',
    data: [5,4,6,8,null,4,8,5,2,null,null,8,4,6],
    options: {
        title: 'A Line chart with null values'

In the download ( https://www.rgraph.net/download.html#stable ) there's a demo page which demonstrates a Line chart with null values called demos/line-null-values.html

Keep in mind this though: If you have the following data:

[4, null, 7, null, null, 9]

You won't see anything displayed on your chart. This is because for a line to be drawn you need at least two consecutive, non-null points, and this dataset doesn't have that.

Posted by Joachim at 13:40 on Tuesday 17th August 2021 [link]
Thanks for your reply - to clarify my question: If you have null-values in your data, the line will draw gaps for null-values - e.g. with [1, 4, null, 7, 6, 7, 9] you will have a gap between points 4 and 7 and no connection between 4 and 7. I wonder how I could set my chart that all defined no-null values are connected.

Posted by Richard at 19:02 on Tuesday 17th August 2021 [link]
There's no option for that but by adding some ondraw event code you can add the connectors. like this:


Don't ask me how it works though - I'm not 100% sure! It's not too bad though - only 40ish lines and you could put it in a library file I guess.

Posted by Joachim at 10:27 on Wednesday 18th August 2021 [link]
Thank for your response I've tried the ondraw event - it worked (but supports only one datagroup). Would be nice to have similar solutions e.g. use an option like "spanGap" which would allow connections across single or multiple null values.

Posted by Richard at 17:01 on Wednesday 18th August 2021 [link]
I'll update the example for multiple datasets. And I'll look at adding an option for this so you don't need the ondraw function.

Currently updating the Sheets connector because Google has updated their API so it's nice and broken. How nice.

Posted by Richard at 12:21 on Friday 20th August 2021 [link]
Ok the example CodePen is now updated for multiple datasets:


Posted by Joachim at 13:34 on Friday 20th August 2021 [link]

thank you for your effort! Solution works fine sofar. But I'd like to keep the color of the lines (instead of grey). if I omit "grey" - both lines get the second color of the colors-array. Is it possible to change this?

Posted by Richard at 14:47 on Friday 20th August 2021 [link]
In the code change this:

    'b m % % l % % s gray',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],

To this:

    'b m % % l % % s %',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],

I think that that should do it.

Posted by Joachim at 16:32 on Friday 20th August 2021 [link]

thanks! This works fine. One last question how do I set the linewidth for the span lines? Tried adding "obj.properties.linewidth[datasetIdx]" but has no effect.

Posted by Joachim at 16:42 on Friday 20th August 2021 [link]

I think I fixed the linewidt used:
obj.context.lineWidth = obj.getLineWidth(0);

Posted by Richard at 16:59 on Friday 20th August 2021 [link]
That would work, or you could incorporate into the path function call like this:

    'b lw % m % % l % % s %',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],

Posted by Richard at 17:03 on Friday 20th August 2021 [link]
PS. I've updated the pen with the linewidth change:


Posted by Richard at 10:08 on Sunday 22nd August 2021 [link]
I've taken a liking to this, so I'll look at incorporating this into the main Line chart for version 6.03.

Posted by Richard at 22:16 on Monday 23rd August 2021 [link]
This is now incorporated into the (canvas) Line chart. There's the following three properties:

nullBridge         (false)
nullBridgeLinewidth (null)
nullBridgeColors    (null) // Can be a string or an array of strings
nullBridgeLinedash ([5,5])

SVG Line chart to follow.

Posted by Joachim at 15:37 on Saturday 18th September 2021 [link]

Thank for your response. I've testet it. It works fine but I ran into a (little) problem until I found that you changed the option-name from "nullBridgeLinedash" to "nullBridgeDashArray". Anyway thanks a lot!    

[Replies are closed]