A horseshoe Pie chart

[No canvas support]

This goes in the documents header:
<script src="../libraries/RGraph.common.core.js">&ly;/script>
<script src="../libraries/RGraph.pie.js"></script>>
Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="300" style="border: 1px solid #ddd">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    color            = 'black';
    colorsBackground = '#ddd';
    donutWidth       = 5;

    pie = new RGraph.Pie({
        id: 'cvs',
        data: [65,35],
        options: {
            variant: 'donut',
            variantDonutWidth: donutWidth,
            colors: [color, colorsBackground],
            colorsStroke: 'transparent',
            shadow: false,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15,
        }
    }).roundRobin().on('draw', function (obj)
    {
        // Add the text that sits in the center of the donut
        RGraph.text2(obj, {
            text:   parseInt(obj.data[0] * obj.get('effect.roundrobin.multiplier')) + '%',
            x:      obj.centerx,
            y:      obj.centery,
            size:   60,
            halign: 'center',
            valign: 'center'
        });
    }).on('beforedraw', function (obj)
    {
        // These two path commands draw the gray background to the donut
        RGraph.path2(obj.context,
            'b a % % % 0 6.29 false',
            obj.centerx,
            obj.centery,
            obj.radius
        );

        RGraph.path2(obj.context,
            ' a % % % 0 6.29 true f %',
            obj.centerx,
            obj.centery,
            obj.radius - donutWidth,
            colorsBackground
        );
    }).on('draw', function (obj)
    {
        
        // Get the coordinates to the start point of the donut chart
        var coords1 = RGraph.getRadiusEndPoint(
            obj.centerx,
            obj.centery,
            RGraph.PI + RGraph.HALFPI,
            obj.radius - (donutWidth / 2)
        );

        // Get the coordinates to the end point of the donut chart
        var coords2 = RGraph.getRadiusEndPoint(
            obj.centerx,
            obj.centery,
            obj.angles[0][1],
            obj.radius - (donutWidth / 2)
        );

        // Draw a white semi-circle at the start of the donut
        RGraph.path2(obj.context,
            'b a % % % 0 6.29 false f white',
            coords1[0],
            coords1[1],
            14
        );

        // Draw a black circle at the start of the donut
        RGraph.path2(obj.context,
            'b a % % % 0 6.29 false f black',
            coords1[0],
            coords1[1],
            8
        );

        // Draw a white semi-circle at the end of the donut
        RGraph.path2(obj.context,
            'b a % % % 0 6.29 false f white',
            coords2[0],
            coords2[1],
            14
        );

        // Draw a black circle at the end of the donut
        RGraph.path2(obj.context,
            'b a % % % 0 6.29 false f black',
            coords2[0],
            coords2[1],
            8
        );
    });
</script>