A Horizontal Bar chart showing Internet users by country
Here's an example of an animated Horizontal Bar chart. It's using:
- The grow animation effect. The timing for this is left at the default.
- A customised blueish background color.
- A customised background grid which has the horizontal grid lines switched off and a custom color for the vertical grid lines.
- Carriage returns in the labels for dual line text on the Y axis labels. These are used so that more information can fit in the left margin.
- The labelsAbove option that shows the values of the bars. These labels are left at as is standard.
- A small shadow effect.
- A smaller than usual text size. The title text size is larger than the rest of the chart though.
- A fixed X scale maximum value.
When all of these things are added together you get the chart that you can see here - and I think that you'll agree that it's quite different to the default appearance of the Horizontal Bar chart.
When canvas was newer - some years ago - adding a lot of shadow blur would significantly slow down the canvas rendering speed - it's now far less pronounced though as browsers have speeded up and as you can see here the speed is more than sufficient.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.hbar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="300"> [No canvas support] </canvas>This is the code that generates the chart:
<script> new RGraph.HBar({ id: 'cvs', data: [2023, 704, 453,437,345,164,28], options: { labelsAbove: true, backgroundColor: '#DCE6F2', backgroundGridHlines: false, backgroundGridBorder: false, backgroundGridColor: '#4E85C6', yaxis: false, textSize: 10, yaxisLabels: [ 'Asia', 'Europe', 'Africa', 'Latin America /\nthe Carribean', 'North America', 'Middle East', 'Oceania /\nAustralia' ], yaxisLabelsBold: true, yaxisLabelsAboveBold: true, vmargin: 10, colors: ['Gradient(#2E4C72:#4E85C6)'], shadow: true, shadowColor: '#aaa', shadowOffsetx: 2, shadowOffsety: 2, axesColor: '#aaa', xaxisScaleMax: 2300, title: 'Internet Users by Geographic region', titleSize: 16, xaxisTitle: 'Millions of users - June 2017', xaxisTitleSize: 8, xaxisTitleBold: true, marginTop: 35, marginBottom: 50 } }).grow(); </script>