An SVG Horizontal Bar chart showing stats 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 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.

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.

As far as responsiveness goes the chart simply reduces in size when the screen size is smaller - no options are changed.

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.hbar.js"></script>

<style>
    /*
    * Here's some CSS to configure the appearance of the DIV tag
    * that the chart is added to. There's positioning and sizing
    * information as well as two of the corners being rounded.
    */
    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>