A red and green SVG Line chart

An SVG Line chart using graduated semi-transparent fill colors and the trace() animation effect.

View the bare-bones, stripped-down version of this demo

This is a Line chart that has some custom values applied to it. It's a filled chart and is also using the filledAccumulative option so the datasets are stacked one on top of the other. Gradients have been given to the fills and different colors given to the strokes. It's also using the trace() effect.

The gradients that are used as the fills aren't used for the stroke colors of the lines - those are separate green and blue (they aren't set specifically - but rather using the defaults instead).

There's a canvas version of this chart (line-filled-dark-trace-sequential.html) in the download archive where the datasets are traced individually and sequentially.

The responsive() function changes the size of the text, reduces the size of the SVG tag and removes the CSS float.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.line.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 750px; height: 300px; background-color: black" id="chart-container"<>/div>
</div>

This is the code that generates the chart - it should be placed AFTER the <div> tag: