An SVG Line chart using transparency
Summary: An SVG Line chart using graduated semi-transparent fill colors and the trace() animation effect.
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="width: 750px; height: 300px; background-color: black" id="chart-container"></div>This is the code that generates the chart: