An SVG filled and stacked Line chart

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.

This goes in the documents header:

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

<script>
    // Create the Line chart and give it the three datasets.
    new RGraph.SVG.Line({
        id: 'cc',
        data: [
            [4,6,12,16,8,4,2,8,18,16,14,16],
            [2,4,8,4,2,6,6,12,8,10,6,8],
            [1,3.5,5,3,4,5,6,11,8,9,5,7]
        ],
        options: {
            // Define a key. SVG charts only support a margin based key.
            // For a graph based key you'll need to use the canvas
            // libraries.
            key: ['Robert','Daniel','Janice'],
            keyColors: ['green','blue','red'],

            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            marginTop: 55,
            marginRight: 15,
            marginLeft: 50,
            marginBottom: 50,
            colors: ['#666', '#666', '#666'],
            
            
            // Stipulate that the chart should be filled and accumulative.
            // Being accumulative means that the datasets are stacked on
            // top of each other. This means that the total of the datasets
            // is clearer compared to when the datasets are non-accumulative
            // (ie they're just drawn one on top of the other). This may
            // suit you better if you need to see the combined totals.
            filled: true,
            filledAccumulative: true,
            filledColors: ['Gradient(red:white)', 'Gradient(blue:white)', 'Gradient(green:white)'],

            yaxisScaleUnitsPost: '%',
            linewidth: 0.001,
            marginInner: 0,
            title: 'Robert, Daniel and Janices stats',
            textColor: '#333',
            textFont: 'Arial',
            
            // Stipulate that the Line is a spline (ie curvy instead of angular)
            spline: true,

            // Only show the horizontal background grid lines
            backgroundGridBorder: false,
            backgroundGridVlines: false,

            // Don't show any axes
            xaxis: false,
            yaxis: false
        }
    
    // Use the trace effect to show the chart and add some responsive capability
    }).trace().responsive([
        {maxWidth:null,width:600,height:300,options:{textSize: 12},parentCss:{'float':'right',textAlign:'none'}},
        {maxWidth:900,width:450,height:250,options:{textSize: 10},parentCss:{'float':'none',textAlign:'center'}}
    ]);
</script>