donut-chartrgraph

increasing inner radius of donut chart and how can write inside donut chart


i am trying to increase inner radius of donut chart and also be able to write inside the donut chart.

   $scope.donut = new RGraph.Pie('myDonut', $scope.donutData)


        .Set('linewidth', 5)
        .Set('strokestyle', 'white')

        .Set('tooltips.event', 'onmousemove')
        .Set('tooltips.effect', 'none')*/
        .Set('colors', $scope.colors)
        .Set('events.click', donutClick)
        .Set('gutter.top', 60)
        .Set('exploded', [])

        .Set('variant', 'donut')

        .Draw();

Solution

  • You can set the radius and the variant.donut.width properties:

    obj.Set('radius', 250)
    obj.Set('variant', 'donut')
    obj.Set('variant.donut.width', 50)
    

    And there's a demo (called demos/donut-in-donut.html) that demonstrates the radius setting here in the RGraph download archive which you can get here:

    https://www.rgraph.net/download.html#stable

    To write inside the ring you can use the drawing API text object. The X/Y coords are:

    obj.ondraw = function (obj)
    {
        var x = obj.centerx
        var y = obj.centery
    }