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
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
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
The chart has a responsive section which reduces the size of a few properties and also removes the
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: