Radar/Polar Area axis rotation and scale

[trigrman]

Hi all,

I’m trying to decide on radar vs. polar area charts for a particular application. One thing that’s making it difficult to choose is knowing whether I can get the formatting to look the way I need to.

For radar charts, it looks like I can rotate the whole chart using the startAngle data attribute. Is there a way to set my minimum and maximum values along the radial axis? I want a chart that always goes from 0 to 100.

For polar area charts this attribute also works to rotate the chart, but it doesn’t seem to also rotate the axis and the labels along with it–is there a way to do that separately from the chart data wedges? I also have the same question here about the axis scale–how do I adjust that?

Thanks,
/mike

[ian]

Hi @trigrman,

Yes, for radial charts you can use the options.scale.ticks.min and options.scale.ticks.max to set the min and the max along the radial axis (Chart.js docs).

For example:

  options: {
    startAngle: 45,
    scale: {
      ticks: {
        min: 0,
        max: 100,
      },
    },
  },

Example in chart editor

Not sure about your polar area chart question because startAngle appears to rotate the labels as well. Here’s a quick example:

{
  type: 'polarArea',
  data: {
    datasets: [
      {
        data: [50, 20, 30],
        backgroundColor: [
          'rgba(255, 99, 132, 0.5)',
          'rgba(255, 159, 64, 0.5)',
          'rgba(255, 205, 86, 0.5)',
        ],
        label: 'My dataset',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  },
  options: {
    startAngle: 45,
  },
}

Link to chart editor

Hope this helps!