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:

• 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>