A combined Bar and Line chart

View the bare-bones version of this demo with any interactive features or animations enabled

A combined SVG Bar and Line chart

A demonstration of how you can combine the different RGraph chart types onto a single SVG tag. Here a Bar chart is being combined with a filled Line chart - a common combination. Both charts are using the labelsAbove option and they both also have a center X-axis.

The Line chart marginInner property has been set such that the points on the Line chart line up with the center of each section of bars.

The Line chart is filled with a semi-opaque color so that you can see the bars behind the line.

Both the Line and Bar have the labelsAbove property stipulated so that there are labels above each point/bar that show you the exact value.

When the screen size is smaller the size of the text is reduced and the CSS float on the SVG tag is removed.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>
, Put this where you want the chart to show up:
<div style="float: right">
    <div style="width: 650px; height: 250pt" id="chart-container"></div>
This is the code that generates the chart - it should be placed AFTER the div tag: