A blue SVG Horizontal Bar chart

View the bare-bones version of this demo with any interactive features or animations enabled

A multi-colored 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:
    * 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;

<div style="float: right">
    <div id="chart-container"></div>
This is the code that generates the chart - it should be placed AFTER the div tag: