A simple SVG Line chart

View the bare-bones, stripped-down version of this demo

Here's a nice, simply-presented SVG Line chart. It has no background grid, a large marginInner setting (which was, until version 5.01, called hmargin - but is now called marginInner) larger than usual text and an extra little bit of text that's added using the labelsAboveSpecific property. The previous way of adding this text was to use the RGraph API, and because it's an SVG-based chart it did not need to be added in the draw event. Now though, it's added using the much simpler labelsAboveSpecific property and the label is styled using the labelsAbove* properties. Using the RGraph properties also makes the text easier to manipulate when you're making use of the responsive() function.

The chart has a responsive() section that reduces the size of a few properties and also removes the CSS float: from the SVG tag.

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="float: right">
    <div style="width:650px; height: 250px" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the <div> tag: