A floating Line chart

View the bare-bones version of this demo with any interactive features or animations enabled

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: