An SVG Bar chart configured to look like the millionaire Bar chart

There's a canvas version of this chart here.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
, Put this where you want the chart to show up:
<div style="width: 300px; height: 250px; border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px" id="cc"></div>
This is the code that generates the chart:
<script>
    scores = [50,20,15,15];

    var bar = new RGraph.SVG.Bar({
        id: 'cc',
        data: RGraph.SVG.arrayClone(scores),
        options: {
            backgroundGridLinewidth: 3,
            backgroundGridColor: '#6A93CA',
            backgroundGridVlinesCount: 8,
            backgroundGridHlinesCount: 10,
            xaxis: false,
            yaxis: false,
            colors: ['#F874EE'],
            gutterLeft: 10,
            gutterRight: 10,
            gutterTop: 30,
            gutterBottom: 45,
            yaxisMax: 100,
            xaxisLabels: ['A','B','C','D'],
            xaxisTextSize: 26,
            xaxisTextColor: 'yellow'
        }
    }).grow();
    
    // Add the text that gives the percentages
    for (var i=0; i<scores.length; ++i) {

        RGraph.SVG.text({
            object: bar,
            text: scores[i] + '%',
            x: bar.coords[i].x + (bar.coords[i].width / 2),
            y: bar.properties.gutterTop - 6,
            color: 'white',
            halign: 'center',
            size: 18
        });
    }
</script>

« Back