A black and orange SVG HBar

This is a Horizontal Bar chart that is actually made up of two charts. The first chart is the gray backgrounds 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 HBar chart).

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="padding: 15px">
    <div style="width: 500px; height: 300px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
    data   = [70,80,60,50,40,80];
    labels = ['JavaScript','HTML','CSS','React','Ruby','Python'];

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [1,1,1,1,1,1],
        options: {
            colors: ['gray'],
            xaxisScale: false,
            backgroundGrid: false,
            vmargin: 5,
            yaxisLabels: labels,
            textColor: 'rgba(0,0,0,0)',
            labelsAbove: true,
            labelsAboveColor: 'white',
            labelsAboveSpecific: data
        }
    }).draw();

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: data,
        options: {
            colors: ['orange'],
            textColor: 'white',
            yaxisLabels: labels,
            xaxisScale: false,
            backgroundGrid: false,
            vmargin: 5
        }
    }).wave();
</script>