A stacked Bar chart that has a key, a title, a subtitle, has bold center labels, has the labelsAbove option enabled and it uses the grow effect. The center labels font size has been increased.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.key.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: { key: ['Doobry A','Doobry B','Doobry C'], labelsAbove: true, labelsAboveUnitsPost: 'Kg', labelsAboveSize: 12, gutterTop: 85, gutterLeft: 100, gutterRight: 100, 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: 'Colored doobries sold this week', titleSubtitle: 'Fred on the left, Martin on the right', keyColors: ['pink', 'green', '#ee0'] } }).grow(); </script>