A combined Bar and Line chart

Summary: A grouped Bar chart with an overlaid filled Line chart. It also has the labelsAbove option enabled so you get indications of each points value.

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.


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: