# A basic SVG Line chart

This is an example of a basic Line chart. It has two datasets configured (hence there being two lines), has a title, key and is animated by using the Line chart trace() effect. It uses carriage returns (\r\n) along with a none-breaking whitespace character (a unicode character) in order to span the labels over two 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: [0.05,0.06,0.01,0.06,0.09,0.02,0.07],
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                key: ['Richard','Charlie'],

                gutterTop: 55,

                linewidth: 5,
                hmargin: 0,

                title: 'A basic linechart',

                gutterLeft: 50,
                gutterBottom: 50,
                yaxisDecimals: 2,

                tickmarksStyle: 'endcircle',
                tickmarksFill: 'white',
                tickmarksLinewidth: 3,
                tickmarksSize: 10,

                spline: true,
                xaxis: false,
                yaxis: false,
                xaxisLabels: [
                    '\u00A0\r\nMondays results',
                    'Tuesdays results',
                    '\u00A0\r\nWednesdays results',
                    'Thursdays results',
                    '\u00A0\r\nFridays results',
                    'Saturdays results',
                    '\u00A0\r\nSundays results'
                ],
                shadow: true
            }
        }).trace();
    </script>