A combined Bar and Line chart

A demonstration of how you can combine the different RGraph chart types on to 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, and 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="width: 650px; height: 300px" id="chart-container"></div>

This is the code that generates the chart: