A blue SVG Horizontal Bar chart

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 css 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.

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.

As far as responsive features go, the chart simply reduces in size when the screen size is smaller - no options are changed.

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>
    /*
    * Here's some CSS to configure the appearance of the div tag
    * that the chart is added to. There's the background gradient
    * as well as two of the corners being rounded.
    */
    div#chart-container {
        background-image: linear-gradient(45deg, #000049,#0000CB);
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
    }
</style>

<div style="float: right">
    <div id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    // Create the HBar chart. There's only a small amount of data given
    // to the chart.
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [2650, 2300, 1950, 1600, 1350],
        options: {
            yaxisLabels: ['2005','2004', '2003', '2002','2001'],
            yaxisColor: 'white',
            yaxisTickmarks: null,
            xaxis: false,
            
            // Turn off the background grid horizontal lines
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: 'white',

            title: 'Annual revenue for Star Tech',
            textColor: 'white',
            textSize: 8,
            
            // Use the RGraph short gradient syntax to add some colors
            // to the chart.
            colors: [
                'Gradient(#9B68C0:#E4C1FD)',
                'Gradient(#9B9B9B:#E5E5E5)',
                'Gradient(#B38D1A:#F7DD91)',
                'Gradient(#4E81B4:#B2D4F6)',
                'Gradient(#9B0303:#E57F7F)'
            ],
            
            // So that all of the bars are a separate color (as defined
            // above) the colorsSequential option should be given.
            colorsSequential: true,

            labelsAbove: true,
            xaxisScaleUnitsPre: '$',
            xaxisScaleUnitsPost: 'm',
                
            // Add a responsive configuration that resizes the
            // chart when you use a smaller screen
            responsive: [
                {maxWidth:null,width:650,height:300,parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth:800, width:400,height:250,parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    
    // Draw the chart
    }).draw();
</script>