An SVG Horizontal Bar chart that might be used in an infographic

The raw data for the chart is first sorted so that the highest number is at the top.

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: 350px; height: 500px" id="chart-container"></div>
</div>

This is the code that generates the chart:

<script>
    // The "raw" data
    data = [
        [4,'John', 'red'],
        [8,'Luis','green'],
        [6,'Joan','blue'],
        [5,'Larry','brown']
    ];
    
    // Sort the data using the JavaScript sort function
    data.sort(function (a, b)
    {
        return b[0] - a[0];
    });
    
    // Initialise the arrays that are given to RGraph
    data_extracted   = [];
    labels_extracted = [];
    colors_extracted = [];
    
    // Separate out the different bits of data into the relevant arrays
    data.forEach(function (v, k, arr)
    {
        data_extracted.push(v[0])
        labels_extracted.push(v[1] + ' ({1}%)'.format(v[0]))
        colors_extracted.push(v[2]);
    });

    hbar = new RGraph.SVG.HBar({
        id: 'chart-container',
        data: data_extracted,
        options: {
            yaxisLabels: labels_extracted,
            xaxis:false,
            yaxis: false,
            colors: ['red','green','blue','brown'],
            colorsSequential: true,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            vmargin: 10
        }
    }).draw();
    
    // Loop through the bars
    for (var i=0; i<hbar.coords.length; ++i) {
    
        // Get the credentials of the Bar chart
        var x = parseFloat(hbar.coords[i].element.getAttribute('x')),
            y = parseFloat(hbar.coords[i].element.getAttribute('y')),
            w = parseFloat(hbar.coords[i].element.getAttribute('width')),
            h = parseFloat(hbar.coords[i].element.getAttribute('height')),
            c = hbar.coords[i].element.getAttribute('fill');
    
        // Add the circles at the end
        RGraph.SVG.create({
            svg: hbar.svg,
            type: 'circle',
            attr: {
                cx: x + w,
                cy: y + (h / 2),
                r: 30,
                fill: c,
                stroke: 'white',
                'stroke-width': 7
            }
        });

        // Draw the text that goes inside the circle
        RGraph.SVG.text({
            object: hbar,
            x: x + w,
            y: y + (h / 2),
            text: i+1,
            halign: 'center',
            valign: 'center',
            color: 'white',
            size: 30,
            bold: true
        });
    }
</script>