[Chartjs]-In ChartJs using a Polar area chart to show both percentage and value independently

by

1👍

✅

I know this is an old question, but if I understand correctly, this is entirely doable. I had trouble finding a solution anywhere though and had to devise one myself. The default Polar Chart behaviour is to have each segment have the same angle. But it’s easy to set a different angle for each slice in the options. I wanted to do this so that the radius of a segment could represent a percentage of it’s own goal, while the angle of the slice represents the magnitude of that goal’s contribution to the whole (think sales budget of a product for the radius and the amount that product’s sales contribute to total company sales budget as the angle).

The key is the options.elements.arc property when you are setting up the chart. You can pass in an array of values and adjust the angle of each segment. As long as the total adds to 360, you will have a complete circle in your Polar Chart:

new Chart(ctx, {
    type: "polarArea",
    data: chartData, // my data comes from an API but yours can come from whatever source you choose
    options: {
        elements: {
            arc: {
                angle: [90,90,50,130]
                /* this is an example. You can build the array anywhere 
                   and then set the angles here. You can actually get
                   creative by not summing to 360. They can
                   start wrapping around on top of each other (> 360) or not
                   take up the full circle (< 360).
                */
            }
        }
    }
);

Leave a comment