Skip to content
Stand with Ukraine flag

Polar area

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Polar area

Displays the latest values of the attributes or time series data in a polar area chart. Supports numeric values only.

Widget Type
  • Latest
Category
  • Charts & Graphs

Who it’s for

Anyone comparing several readings that belong to directions or repeating categories — output by compass sector, activity by hour of day, load by zone arranged around a site. A polar chart keeps the categorical arrangement circular, which matches how the reader already pictures the thing being measured.

What it does

The Polar area chart draws one wedge per data key around a circle, each wedge spanning an equal angle and extending from the center by its latest value. Three keys reading Wind = 40, Solar = 35 and Hydroelectric = 25 produce three equal-angle wedges of different radius, so magnitude is read as distance from the center rather than as width.

  • Equal angles, varying radius — unlike a pie, every category gets the same slice of the circle, so the comparison is about magnitude and not about share.
  • The starting angle is configurable, which is what lets a chart of compass sectors put north at the top.
  • The radial axis can be pinned, so wedge lengths stay comparable between glances instead of rescaling with the data.
  • Wedge appearance is configurable in its own right.
  • Tooltips report values or percentages with their own decimals, and the legend can carry each series’ total.
  • Wedge order can be fixed by label, keeping the arrangement stable when a key is added.
  • The Polar area chart plots the latest value of each key: it shows no history, and it is a poor choice for categories that have no natural circular order.

How to set up

Data keys

The Polar area chart takes one wedge per data key, from one or more datasources.

KeyRoleTypeDescription
WindOne wedge, extended by its latest valueTimeseriesNumeric values only. Attributes work equally well. Add one key per wedge; the key’s label captions the wedge and its legend row. Keys are placed around the circle in order, so the order is part of the meaning.

Add the keys in the order they should appear around the circle, then set the start angle so the first one lands where the reader expects it. Keys should share a unit, since they share a radial axis.

How to customize

  • To rotate the chart — set Start angle, which decides where the first wedge begins.
  • To stop the radius rescaling as values move — set the axis Scale min and max instead of Auto.
  • To restyle the wedges — use Bar appearance to set how they are drawn.
  • To make the radial ticks readable — set the axis tick label font and color.
  • To show the underlying numbers — turn on Legend and Show total value.
  • To report percentages on hover — set the tooltip’s value type accordingly.
  • To keep the arrangement stable — turn on Sort series by label, so a new key does not rotate the whole chart.
  • To position the legend — set its Position to sit above, below or beside the chart.

Tips

  • Set the start angle before anyone learns the chart. Rotating a directional chart after it is in use is the kind of change that reads as a data problem rather than a formatting one, because every wedge appears to have moved.
  • Pin the radial maximum when wedges are compared across several charts. Two auto-scaled polar charts side by side look alike no matter how far apart their actual values are, which is exactly the comparison the layout invites.

Share Your Widget with the Community

Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.