An SVG black and white Line chart

This is an SVG version of a canvas Line chart which you can see in the download archive.

So this Line chart looks like a simple black and white affair - and it is, though to get it looking like it does you need to set a few configuration options.

The linewidth has been increased (and also the linewidth of the X and Y axes), the tickmarks on the axes have been disabled, the number of Y axis labels has been reduced (and units appended), the margins have been tweaked, the background grid has been disabled and the size and font of the text on the chart has been altered.

However this is not all! There's also a draw event listener that draws the overhang at the end of the axes. This is done using the RGraph.SVG.create() function (because the chart is SVG the draw event doesn't have to be used - you could just place the code that draws the overhangs after the main chart code if you wanted to). The function that does this is:

// The create() function is the main RGraph function used to create SVG elements
RGraph.SVG.create({
    
    // Give it the chart object (the obj variable) and
    // stipulate the type of element to be created
    svg: obj.svg,
    type: 'path',
    
    // Set the parent of the new element
    parent: obj.svg.all,
    
    // A list of attributes for the new tag
    attr: {
    
        // The d attribute of the path tag is the path that should be drawn. Here
        // the RGraph format() function is used to create a custom string with
        // various replacements (so that there's not just a lot of concatenation
        // and hence the path is a bit more readable.
        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
        ),
        
        // Set the colors and the linewidth
        stroke: 'black',
        'stroke-width': 7,
        fill: 'rgba(0,0,0,0)'
    }

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

<div id="cc" style="width:600px; height: 250px"></div>