An SVG Horizontal Bar chart showing the annual income for Star Tech

Summary: An SVG Horizontal Bar chart showing the annual revenue for Star Tech (not a real company!). It's a horizontal Bar chart which has been customised to give it a different aesthetic.

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.


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 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>
This is the code that generates the chart: