Rose pie chart

Who it’s for

The Rose pie chart widget is for anyone who shows how a total splits into parts on a ThingsBoard dashboard: energy by pump, traffic by source, production by line or alarms by type. They want the biggest and the smallest part to stand out at a glance, before anyone reads a label. The question they would type is “how do I show shares of a total as a pie chart?”

What it does

A dashboard shows visits by source: Search 400, Direct 335, Email 310, Ads 274 and Video 235. All five slices are red. Search is the lightest and reaches the farthest out, Video is the darkest and the shortest, and hovering a slice shows Search: 400 (25.7%).

• Turns every data key, or every entity of one key, into a slice, named by whatever tells the slices apart: the key, the entity, or both.
• Sizes each slice by its value twice: its angle, and how far it reaches out, as in a Nightingale rose chart.
• Shades each slice by its value, darker for small values and lighter for big ones, so the ranking reads before any label does.
• Labels each slice with its name, its value or its percent, and the tooltip shows all three.
• Turns into a plain pie or a donut with two settings.
• Runs a dashboard action when a slice is clicked.
• Shows the latest value of each key. It does not draw history over time.

How to set up

Data keys

The Rose pie chart widget takes one or more datasources with any number of numeric keys.

• Any numeric key — Timeseries or Attribute. Each key of each entity becomes one slice, sized by its latest value. Units and decimals come from the key’s own settings and appear in the tooltip and the value labels. A key with no value yet, or with a negative value, is left out. When no key has a value, the card shows its no-data message.

Each slice is named after the key when the keys come from one entity, after the entity when one key comes from many entities, and after both otherwise.

Actions

• On slice click — empty by default. Add an action that opens a dashboard state or updates a state entity. It receives the entity behind the slice.

How to customize

Shape

• To draw a plain pie — turn off Size slices by value, on by default. Every slice then has the same length and only its angle shows its value.
• To make it bigger or smaller — set Size, %, 55 by default.
• To draw a donut — set Hole, %, 0 by default. 40 to 50 gives a classic donut.
• To change the order of the slices — set Order: Smallest first by default, Largest first, or As the data keys are listed.

Colors

• To color each slice by its data key — set Slice colors to From the data keys. The default, One color for all, paints every slice with Color, red #C23531 by default.
• To keep the colors flat — turn off Shade by value, on by default.
• To remove the shadow — turn off Drop shadow, on by default.

Labels and tooltip

• To show values or percents on the chart — set Labels: Name by default, Name and value, Name and percent, or None.
• To recolor the labels — set Label color, a soft gray by default. It also colors the lines to the slices.
• To restyle the tooltip — set Tooltip background and Tooltip text, white and near-black by default.

Tips

• Give every key the same color, or keep One color for all, when the order matters more than which part is which. The shades then carry the ranking on their own.
• Use From the data keys with Shade by value off when every part has a color people already know, such as one color per tariff band.
• On a dark dashboard, set a light Label color such as rgba(255, 255, 255, 0.4) and a dark Tooltip background.