# An outlined red SVG Line chart

Here's an example of am outlined red and white Line chart. It's ahieved by using two Line charts, one on top of the other. And with the linewidth of the underlying line chart a couple of points bigger than the upper Line chart. This could be done using just a single SVG tag but this uses two that are positioned on top of each other. It also use the trace effect (on both Line charts).

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="display: inline-block; position: relative; width: 750px; height: 300px">
        <div style="position: absolute; width: 750px; height: 300px; top: 0; left: 0" id="chart-container1"></div>
        <div style="position: absolute; width: 750px; height: 300px; top: 0; left: 0" id="chart-container2"></div>
    </div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Line({
            id: 'chart-container1',
            data: [10,15,13,16,15,16,13,14,18,16,13,175,-160,11,15,10,16,13,16,15,18,13,12],
            options: {
                gutterLeft: 50,
                yaxisMin: 'mirror',
                colors: ['white'],
                xaxis: false,
                yaxis: false,
                yaxisLabelsCount: 0,
                linewidth: 10,
                backgroundColor: '#ddd',
                backgroundGrid: false,
                backgroundGridBorder: false,
                yaxisScale: false,
                tickmarksStyle: 'filledendcircle',
                tickmarksSize: 15
            }
        }).trace();

        new RGraph.SVG.Line({
            id: 'chart-container2',
            data: [10,15,13,16,15,16,13,14,18,16,13,175,-160,11,15,10,16,13,16,15,18,13,12],
            options: {
                gutterLeft: 50,
                colors: ['red'],
                xaxis: false,
                yaxis: false,
                yaxisMin: 'mirror',
                yaxisLabelsCount: 0,
                yaxisScale: false,
                linewidth: 7,
                backgroundGrid: false,
                backgroundGridBorder: false,
                yaxisMin: 'mirror',
                tickmarksStyle: 'filledendcircle',
                tickmarksSize: 13
            }
        }).trace();
    </script>