Skip to content
Stand with Ukraine flag

Pie

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

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

Widget Type
  • Latest
Category
  • Charts & Graphs

Who it’s for

Anyone answering a share-of-total question — how today’s generation splits across wind, solar and hydro; how floor space divides between zones; which product line accounts for most of the output. The reader wants proportions, not values, and a pie answers that faster than three numbers do.

What it does

The Pie chart draws one slice per data key, sized by that key’s latest value. Three keys reading Wind = 40, Solar = 35 and Hydroelectric = 25 render as three slices in those proportions, each labelled and colored, with a legend listing the values beside them.

  • One slice per key — the chart compares the latest readings of several keys against each other, which is a different question from how one key changed over time.
  • Slice labels can sit inside, outside or be hidden, so a chart with three slices and one with twelve can both stay legible.
  • The legend can show each series’ total, which gives the reader the underlying numbers without hovering.
  • Tooltips can report absolute values or percentages, with their own decimals, so the same chart serves an engineer and an executive.
  • Slice order and direction are configurable, which keeps a chart stable when a key is added later.
  • The Pie chart shows the current split: it plots no history, and a key reporting no value is simply absent rather than drawn as an empty slice.

How to set up

Data keys

The Pie chart takes one slice per data key, from one or more datasources.

KeyRoleTypeDescription
WindOne slice, sized by its latest valueTimeseriesNumeric values only. Attributes work equally well. Add one key per slice; the key’s label captions the slice and its legend row.

Values must share a unit for the proportions to mean anything — the chart divides whatever numbers it receives, so mixing a percentage with a kilowatt figure produces a chart that renders correctly and says nothing. Negative values cannot be drawn as a share of a total and should be excluded.

How to customize

  • To label slices directly instead of in the legend — turn on Label and set its Position to place text inside or outside the slice, then set its font and color.
  • To show the underlying numbers — turn on Legend and Show total value, and set the legend’s label and value fonts and colors.
  • To report percentages instead of values on hover — set the tooltip’s value type accordingly and give it the decimals the reader needs.
  • To separate the slices visually — raise Border width and pick a border color, which helps when adjacent slices are close in hue.
  • To make the chart smaller than its tile — reduce Radius, leaving room for outside labels.
  • To keep slice order stable — turn on Sort series by label, so adding a key later does not reshuffle the colors readers have learned.
  • To reverse the drawing direction — toggle Clockwise layout.
  • To position the legend — set its Position to sit above, below or beside the chart.

Tips

  • Keep the chart to about five slices and group the rest. A pie stops communicating proportion once slices get thin, and a Other key computed upstream reads better than eight slivers competing for a label.
  • Turn on Sort series by label on any chart whose keys may grow. Without it, slices are ordered as configured, so inserting a key shifts every color and quietly invalidates whatever anyone remembered about the chart.

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.