A black and orange SVG Horizontal Bar chart

This is a Horizontal Bar chart that's made up of two separate objects. The first is the gray background for the bars that you can see. Then the orange Horizontal Bar chart is overlaid on top. The labels on the right are made up from the labelsAbove option (on the first, background chart). As you can see the chart uses the wave effect (the wave effect is not just a Bar chart effect but also available with the Horizontal Bar chart).

By combining charts like this you can get a multitude of different effects that just wouldn't be feasible with just a single chart. You can examine the source code for both of the Horizontal Bar objects below. The div tag that the svg uses is itself wrapped in another div tag and it's this one that has css applied to it.

This chart doesn't do a lot in terms of responsive features. It reduces in size a little, the text size is reduced and the css float is removed.

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:

<div style="float: right">
    <div style="width: 500px; height: 300px; display: inline-block; background-color: black" id="chart-container"></div>
</div>

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

<script>
    // The data for the chart
    data   = [70,80,60,50,40,80];
    
    // The labels for the chart. These labels are positioned on the
    // left-hand-side as normal and the data is also given as the
    // labelsAbove labels.
    labels = ['JavaScript','HTML','CSS','React','Ruby','Python'];

    // Create the HBar chart that becomes the gray backgrounds to
    // the bars. Note that all of the bits of data are set to one.
    // This means that all of the gray bars on the chart will be
    // as far right as it goes.
    bar_bg = new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [1,1,1,1,1,1],
        options: {
            colors: ['gray'],
            xaxisScale: false,
            backgroundGrid: false,
            marginInner: 5,
            
            // If these aren't given then the marginLeftAuto will make
            // the left margin 0 when it actually needs to match the
            // other chart.
            yaxisLabels: labels, 
            
            // Don't want to see any text on the background chart.
            textColor: 'rgba(0,0,0,0)',

            // Add the labels that you can see on the right of the
            // chart.
            labelsAboveColor: 'white',
            labelsAboveSpecific: data,
            responsive: [
                {maxWidth: null, width: 500, height: 300, options: {textSize: 12},parentCss:{'float':'right', textAlign:'none'}},
                {maxWidth: 800, width: 400,  height: 250, options: {textSize: 10},parentCss:{'float':'none', textAlign:'center'}}
            ]
        }
    }).draw();








    // This is the orange HBar chart that you can see and which
    // represents the actual values.
    bar_fg = new RGraph.SVG.HBar({
        id: 'chart-container',
        data: data,
        options: {
            colors: ['orange'],
            textColor: 'white',
            yaxisLabels: labels,
            xaxisScale: false,
            backgroundGrid: false,
            marginInner: 5,
            responsive: [
                {maxWidth: null, width: 500, height: 300, options: {textSize: 12}},
                {maxWidth: 800, width: 400,  height: 250, options: {textSize: 10}}
            ]
        }
    
    // The orange chart uses the wave() effect.
    }).grow({callback: function ()
    {
        bar_bg.set('labelsAbove', true);
        RGraph.SVG.redraw();
    }});
</script>