An SVG black and white Line chart

This is an SVG version of a canvas Line chart.

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 id="cc" style="width:700px; height: 300px"></div>
This is the code that generates the chart:
<script>
    var line = new RGraph.SVG.Line({
        id: 'cc',
        data: [0,10,46,13,74,100,51],
        options: {
            linewidth: 7,
            colors: ['black'],
            shadow: false,
            xaxisTickmarks: false,
            xaxisLinewidth: 7,
            yaxisTickmarks: false,
            yaxisLinewidth: 7,
            yaxisLabelsCount: 2,
            yaxisScaleUnitsPost: '%',
            tickmarksStyle: 'filledcircle',
            tickmarksSize: 15,
            marginLeft: 125,
            marginRight: 5,
            marginBottom: 25,
            marginTop: 20,
            backgroundGrid: false,
            textSize: 24,
            textFont: 'Verdana',
            hmargin: 35,
            yaxisLabelsOffsetx: -25
        }
    
    // Draw the "tails" to the axes
    }).on('draw', function (obj)
    {
        var prop = obj.properties,
            size = 20;

        var path = RGraph.SVG.create({
            svg: obj.svg,
            type: 'path',
            parent: obj.svg.all,
            attr: {
                d: 'M {1} {2} L {3} {4} L {5} {6}'.format(
                    prop.marginLeft - size,
                    obj.height - prop.marginBottom,
                    prop.marginLeft,
                    obj.height - prop.marginBottom,
                    prop.marginLeft,
                    obj.height - prop.marginBottom + size
                ),
                stroke: 'black',
                'stroke-width': 7,
                fill: 'rgba(0,0,0,0)'
            }
        });
        
        $cl(path);
    }).trace({frames: 60});
</script>