A black and orange SVG HBar

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>

« Back