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!

[ilusha]

Hello,

Could you please explain how the maximum value along the axis can be set to 100 so a Polar Area chart ranges from 0-100?

So, similar to the explanation you provided for the radial chart, but for the polar area chart instead.

Thanks!

[ian]

Hi @ilusha,

The solution is exactly the same: use options.scale.ticks.max to set the maximum value on the scale.

{
  type: 'polarArea',
  data: {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [
      {
        data: [3, 56, 61, 78, 83],
        backgroundColor: [
          'rgba(255, 99, 132, 0.5)',
          'rgba(255, 159, 64, 0.5)',
          'rgba(255, 205, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(54, 162, 235, 0.5)',
        ],
        borderColor: 'transparent',
        label: 'My dataset',
      },
    ],
  },
  options: {
    scale: {
      ticks: {
        min: 0,
        max: 100,
      },
    },
  },
}

Example in chart editor

[ilusha]

Thank you! If a value exceeds 100, its portion of the Polar chart spills over out of the outer ring as seen in the PNG I attached. Is it possible to avoid this?

[ilusha]

Also, I would like to edit the font size and style of the Polar Area chart’s legend labels while keeping the min tick value at 0 and the max tick value at 100. My chart is currently programmed as shown below, but when I change the value of “fontsize” to 14, the chart does not update. I tried moving the 3rd curly bracket below max:100, to the end of the entire code, which updated the font, but then I lost the 0-100 tick value functionality.

  options: {
    scale: {
      ticks: {
        min: 0,
        max: 100,
      },
    },
  },
    "title": {
      "display": false,
      "position": "top",
      "fontSize": 12,
      "fontFamily": "sans-serif",
      "fontColor": "#666666",
      "fontStyle": "bold",
      "padding": 10,
      "lineHeight": 1.2,
      "text": "Chart title"
    },

[ian]

Hi @ilusha,

It looks like you may be constructing the JSON incorrectly. Make sure to include title inside of options. Here’s the updated example with custom chart title fontSize.

As for your earlier question about the polar chart spilling over, you have two options: (1) use a plugin to dynamically hide any values outside the chart (link), or (2) clamp the values to 100 before you send them to QuickChart. #2 is probably easier

[ilusha]

Fixed it, thank you!!