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 show charts on your website.

More »


Get the latest version of RGraph (version 6.17) from the download page. 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 (£99) commercial license available.

More »

A floating Line chart

This is a demo of a Line chart that was inspired by an example that was showcased on the NVD website.

It's a filled Line chart that has the filledAccumulative and the spline options enabled.

And importantly, the first color for the chart is transparent - making it seem like the rest of the datasets are "floating".

The rest of the configuration is quite straightforward - the vertical grid lines are turned off and the colors are a custom set. There are also labels specified (the labels are numbers - though this does NOT make it a scale. The Line chart x-axis is NOT scaled).

The responsive configuration reduces the size of the svg tag and removes the css float.

Note: There's a canvas version of this chart in the download (called demos/line-nvd.html) where the datasets are traced sequentially (so the datasets are traced one at a time and when one dataset finishes tracing the next starts).

This goes in the documents header:
<script src="../libraries/RGraph.svg.common.core.js" ></script>
<script src="../libraries/RGraph.svg.line.js" ></script>
Put this where you want the chart to show up:
<div style="float: right">
    <div style="width: 600px; height: 250px" id="chart-container"></div>
This is the code that generates the chart - it should be placed AFTER the div tag:
    // Create the Line chart and give it all of the data that's to be shown
    // on the chart. There's four datasets but so that the lines appear to
    // be 'floating' the first dataset has a transparent color. The first
    // line is the bottom edge of the set of lines.
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
        options: {
            marginLeft: 45,
            filled: true,
            filledAccumulative: true,
            // Here's the colors being set - note the first is transparent
            // so we don't see it.
            colors: ['transparent', '#FDA354', '#C4D6ED', '#609EC8'],

            spline: true,

            // Turn off the background grid vertical lines and its border
            backgroundGridVlines: false,
            backgroundGridBorder: false,

            xaxis: false,
            yaxis: false,
            textSize: 14,
            xaxisLabels: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20'],
            responsive: [
                {maxWidth:null,width:600,height:250,parentCss:{'float':'right',textAlign: 'none'}},
                {maxWidth:850, width:450,height:200,parentCss:{'float':'none',textAlign:'center'}}
    // Animate the chart with the trace() effect and add some responsive capability to
    // accommodate both large and small screens