In ChartJs using a Polar area chart to show both percentage and value independently

Question

I would like to be able to show both a percentage and a value independently on the one polar area chart from chartjs. For example, I would like to set the percentage market share like a pie chart, but have the values represented in the circles showing profit of each segment with the height relative to the values, not the percentage.

I am aware that a traditional polar chart just plots both the value and its percentage on the chart. I want to separate the two, so that I can decide the percentage and then set the value to something more meaningful.

Is that even possible? Here is a link to a codepen showing someone else's implementation of the chartjs polar chart. I've had a play with it, but haven't got anywhere so far.

Codepen polar chart example

Here is the code:

var myChart = new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ["M", "T", "W", "T", "F", "S", "S"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  }

but I can't see any way to have two lots of data to feed in, one for the percentage and the other for the values.

The api, found here, only references the angle, not the way to set it. Is there something in the api (that I am perhaps missing) that would help me bypass this?

Answer 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).
                */
            }
        }
    }
);