# An SVG Line chart with a dark theme

This goes in the documents header:

    <script src="../libraries/RGraph.svg.common.core.js" ></script>
    <script src="../libraries/RGraph.svg.line.js" ></script>

Put this where you want the chart to show up:

    <div style="width: 950px; height: 250px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        var data = [4,5,3,8,6,5,9,4,1,8,5,6,8,9,4,8,7,9,8,9,11,13,10,12,11,16,15,18,13,19,21,17,19,23,18,21,25,26,24,29,30];

        var line = new RGraph.SVG.Line({
            id: 'chart-container',
            data: data,
            options: {
                colors: ['red'],
                linewidth: 5,
                backgroundGridColor: '#666',
                backgroundGridVlinesCount: 4,
                backgroundColor: 'black',
                xaxis: false,
                xaxisTickmarks:false,
                xaxisLabels: [
                    'Quarter 1',
                    'Quarter 2',
                    'Quarter 3',
                    'Quarter 4'
                ],
                xaxisLabelsPosition: 'section',
                yaxisTickmarks:false,
                yaxis: false,
                spline: true,
                attributionColor: '#ddd',
                attributionX: '-20',
                filled: true,
                filledColors: ['Gradient(rgba(255,0,0,0.75):rgba(255,0,0,0.5):rgba(255,0,0,0))']
            }
        }).trace();

        line.svg.style.borderTopLeftRadius = '25px';
        line.svg.style.borderBottomRightRadius = '25px';
    </script>

« Back