# A line chart with a gradient

This is a demonstration of a filled blue Line chart that actually uses a gradient for the fill color. There's a title and also no vertical background grid lines.

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,3,5,9,2,10,5,
                8,6,4,3,5,2,4,
                7,6,9,4,5,5,2,
                4,6,9,9,8,6,5
            ],
            options: {
                backgroundGridColor: 'Gradient(#ddd:white)',
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                hmargin: 10,
                title: 'A  line chart with a gradient',
                gutterLeft: 50,
                gutterBottom: 50,
                yaxis: false,
                xaxisColor: 'gray',
                xaxisLabels: ['Q1','Q2','Q3','Q4'],
                xaxisLabelsPosition: 'section',
                spline: true,
                colors: ['black'],
                filled: true,
                filledColors: ['Gradient(blue:#ccf)'],
                linewidth: 3,
                textColor: 'gray'
            }
        }).draw();
    </script>