A red and green SVG Line chart
View the bare-bones version of this demo with any interactive features or animations enabled

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
.
<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: