« Previous       Home page demos       Next »

An SVG HBar chart showing the annual revenue for Star Tech

Here's a Horizontal Bar chart that has been significantly customised. The DIV tag that the chart sits in has had a gradient applied to the background and two of the corners are curved, using the border-radius property. the bars themselves have been given a gradient, the background grid has been updated so that there's no border and the horizontal grid lines have been disabled. The labelsAbove option has been added and the chart uses the wave effect.

In order to get a different gradient for each bar the colorsSequential has been enabled and five different gradients have been supplied to the colors option.

The size of the text has been reduced from the default to 8pt.


This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.hbar.js"></script>
Put this where you want the chart to show up:
<style>
    div#chart-container {
        float: right;
        width: 650px;
        height: 300px;
        display: inline-block;
        background-image: linear-gradient(45deg, #000049,#0000CB);
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
    }
</style>

<div id="chart-container"></div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [2650, 2300, 1950, 1600, 1350],
        options: {
            data: [2650, 2300, 1950, 1600, 1350],
            options: {
            yaxisLabels: ['2005','2004', '2003', '2002','2001'],
            yaxisColor: 'white',
            yaxisTickmarks: null,
            xaxis: false,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: 'white',
            title: 'Annual revenue for Star Tech',
            titleColor: 'white',
            textColor: 'white',
            textSize: 8,
            textFont: 'sans-serif',
            colors: [
                'Gradient(#9B68C0:#E4C1FD)',
                'Gradient(#9B9B9B:#E5E5E5)',
                'Gradient(#B38D1A:#F7DD91)',
                'Gradient(#4E81B4:#B2D4F6)',
                'Gradient(#9B0303:#E57F7F)'
            ],
            colorsSequential: true,
            labelsAbove: true,
            xaxisUnitsPre: '$',
            xaxisUnitsPost: 'm'
        }
    }).wave();
</script>