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
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
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: