An SVG filled and stacked Line chart
View the bare-bones version of this demo with any interactive features or animations enabled

This is an SVG
version of an older canvas
demo that has been updated to be a bit more
up-to-date style-wise.
The vertical lines on the grid have been removed, the X-axis
and Y-axis
have been removed and instead of being angular the line is now a spline
(ie it's curvy).
Also, it now uses the trace
animation effect. The chart is filled and the
filledAccumulative
option is set to true so that the three datasets are
stacked on top of each other.
Other than this there's a key, a title and the yaxisScaleUnitsPost
has been set. The
chart is also responsive
and on smaller screens, the size of the SVG
tag is reduced, text size is
reduced and the CSS
float
is removed.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.key.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: 600px; height: 300px" id="cc"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: