# 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 {
            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: