An SVG Line chart inspired by a chart on the NVD website

Summary: An SVG Line chart that was inspired by a chart on the NVD website. The 'floating' appearance is done by setting the color for the first dataset to transparent.

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 straight-forward - the vertical grid lines are turned off and the colors are a custom set. There's 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.

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="width: 950px; height: 250px" id="chart-container"></div>
This is the code that generates the chart: