# A filled spline SVG Line chart

This is a demonstration of a filled spline Line chart with two datasets. It uses the filledAccumulative option in order to "stack" the datasets and also has the trace effect. Notice also that there's a small hmargin set.

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="width: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Line({
            id: 'chart-container',
            data: [
                [4,8,6,1,5,12,5,3,6,4,9,9],
                [8,2,6,15,10,5,5,8,6,8,9,5]
            ],
            options: {
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                hmargin: 15,
                gutterLeft: 75,
                gutterRight: 25,
                gutterBottom: 35,
                yaxisUnitsPre: '$',
                spline: true,
                filled:true,
                filledAccumulative: true,
                linewidth: 0,
                filledOpacity: 0.3,
                title: 'A filled spline chart',
                titleFont: 'Arial black',
                titleItalic: true,
                titleColor: 'gray'
            }
        }).trace();
    </script>