A blue Bar chart that has an offset X axis but also has both
of the axes and
the background grid turned off. It has a title, subtitle,
labelsAbove
labels
and is using the wave()
animation effect. The
font size of the the text is a
little bit smaller than usual too.
<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="padding: 15px"> <div style="width: 950px; height: 300px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.Bar({ id: 'chart-container', data: [12.8,23.3,4.9,10.3,-2.6,4.3,7.5], options: { marginInner: 25, yaxisLabels: false, yaxisScaleMin: -10, yaxisScaleMax: 30, yaxis: false, xaxis: false, backgroundGrid: false, labelsAbove: true, labelsAboveUnitsPost: '%', labelsAboveOffsety: -5, labelsAboveDecimals: 1, labelsAboveSize: 10, colors: ['#00B9F2'], xaxisLabels: ['Hailey','Olga','Barry','Trevor','Stan','Kristian','Tommy'], xaxisTextSize: 8, xaxisTextColor: '#666', yaxisScale: false, title: 'Belfast 2016', titleSubtitle: 'The results of the chilli-off competition', titleSubtitleItalic: true, marginTop: 45 } }).wave(); </script>