A Horizontal Bar chart showing Internet users by country

[No canvas support]

Here's an example of an animated Horizontal Bar chart. It's using:

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>