This is a Bar chart that depicts the growing userbase of the Dropbox online service. It's customised using the xaxisScaleUnitsPost
option (to add units to the Y axis), a large marginInner
setting, the background grid has had the vertical lines disabled and the title is off-center.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 750px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> new RGraph.SVG.Bar({ id: 'chart-container', data: [100,300,400,500], options: { title: 'Dropbox userbase', marginInner: 50, colors: ['#DE2E2D'], backgroundGridLinewidth: 2, backgroundGridColor: 'gray', backgroundGridVlines: false, backgroundGridBorder: false, yaxisScaleUnitsPost: ' million', marginTop: 50, marginLeft: 100, titleX: 100, titleY: 30, titleHalign: 'left', titleBold: true, titleItalic: true, yaxis: false, xaxis: false, xaxisTextColor: 'gray', yaxisTextColor: 'gray', xaxisLabels: ['November 2012','May 2014','June 2015','March 2016'], textSize: 9 } }).wave(); </script>