This is an example of a basic Bipolar chart. The chart is showing stacked data, using the labelsAbove option (that's the labels that appear next to each stack), the center labels are bolded and it has a title/subtitle.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bipolar.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 600px; height: 500px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.Bipolar({ id: 'cc', left: [[4,2,5],[4,6,3],[5,8,9],[4,5,2],[4,6,3],[5,8,9],[4,3,5]], right: [[8,6,6],[2,3,8],[4,6,8],[4,9,8],[2,5,9],[4,5,3],[4,9,6]], options: { labelsAbove: true, labelsAboveUnitsPost: 'Kg', labelsAboveSize: 18, marginTop: 50, marginLeft: 50, marginRight: 50, xaxis: false, yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], yaxisTextBold: true, yaxisTextItalic: true, yaxisTextSize: 18, vmargin: 10, colors: [ 'Gradient(red:white:red)', 'Gradient(green:#faa:green)', 'Gradient(yellow:#faa:yellow)' ], grouping: 'stacked', title: 'A basic Bipolar example chart', titleSubtitle: 'A subtitle to go along with the title' } }).wave(); </script>