An SVG Pie chart configured to be an activity Meter

Like the canvas demo of a similar nature this is a demo of a Pie chart that is configured as a donut chart and is customised to look like an activity meter (though you can have it represent whatever data that you wish). The chart is made by drawing a set of darkened Pie charts and then drawing another set of Pie charts on top which have the second slice that they show set to have transparent as the color - so that the darker Pie beneath can show through. The text in the center is then added using the API with the Pie chart centerx and centery variables.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.pie.js"></script>
Put this where you want the chart to show up:
<div style="width: 500px; height: 500px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    conf = [
        {value: 85, color: '#2B908F', radius: 245},
        {value: 72, color: '#90EE7E', radius: 198},
        {value: 64, color: '#F45B5B', radius: 151}
    ];
    
    // Create the donut charts that become the background
    for (let i=0; i<conf.length; ++i) {
        var pie = new RGraph.SVG.Pie({
            id: 'cc',
            data: [1],
            options: {
                donut: true,
                radius: conf[i].radius,
                colors: [conf[i].color],
                donutWidth: 45
            }
        }).roundRobin();
    }




    // Create the donut charts that are the foreground donuts
    for (let i=0; i<conf.length; ++i) {
        var pie = new RGraph.SVG.Pie({
            id: 'cc',
            data: [conf[i].value, 100 - conf[i].value],
            options: {
                donut: true,
                radius: conf[i].radius,
                colors: [conf[i].color, 'rgba(0,0,0,0.5)'],
                donutWidth: 45
            }
        }).roundRobin();
    }

    RGraph.SVG.text({
        object: pie,
        x: pie.centerx,
        y: pie.centery,
        text: conf[0].value + '%',
        halign: 'center',
        valign: 'center',
        size: 65,
        bold: true,
        color: '#ccc'
    });
</script>