A simple SVG Line chart

An SVG Line chart showing revenue over time. This example shows that a chart doesn't have to be complicated to be attractive.

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) larger than usual text and an extra little bit of text that's added after the chart has been drawn. Because it's an SVG based chart this does not need to be added in the draw event.

Even if it was canvas based, because there's no dynamic features (like tooltips) the chart is not redrawn at all so technically, even with canvas, the draw event would not need to be used.

The chart has a responsive section which 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="width: 650px; height: 250px" id="chart-container"></div>

This is the code that generates the chart: