The Pie Chart Widget Node visualizes data as proportional slices of a circular chart, making it easy to compare categorical values or distributions. This widget is ideal for presenting summaries like status counts or categorical breakdowns.
What Is a Pie Chart?
A Pie Chart shows parts of a whole as slices of a circle. Each slice's size represents its share of the total, either based on a count of occurrences or the value itself. Rayven's pie chart also supports donut style, slice sorting, and custom color assignment.
Step-by-Step: How to Configure the Pie Chart Widget Node
-
Add the widget
-
Drag the Pie Chart Widget Node from the Visualizations panel to the canvas.
-
-
Connect the widget to the data source
-
Link the widget to the upstream workflow node that outputs the relevant data field.
-
The input field must match the JSON key to display.
-
-
Open configuration
-
Double-click the widget to open the configuration window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Title shown on the widget (e.g., Error Type Breakdown). |
| Widget Subtitle | Optional | Text shown below the title for context. |
| Show UID / Label Name | Optional | Toggle to display the device or label name. |
Data Configuration
| Field | Requirement | Description |
|---|---|---|
| Pie Type* | Required | Select Slice per value (count only) or other logic if available. |
| JSON Key to Display* | Required | Field from the incoming JSON payload used for the slices. |
| Calculation Interval* | Required | Time window to aggregate data (e.g., 5). |
| Time Units* | Required | Time unit for the interval (e.g., Minutes, Hours). |
| Refresh Interval (seconds) | Optional | Frequency of chart refresh (default: 60 seconds). |
| Decimal Places | Optional | Number of decimal places shown for values. |
Display Settings
| Field | Requirement | Description |
|---|---|---|
| Display Style | Optional | Choose between Pie or Donut (hollow center). |
| Slice Sorting By | Optional | Order slices by Receiving Order or other options. |
| Show Values in Slices | Optional | Toggle numeric value visibility inside each slice. |
Color Picker
| Field | Requirement | Description |
|---|---|---|
| Slice: Value | Optional | Assign specific color for individual categories. |
| Hex Color | Optional | Select the slice color using a hex code (e.g., #3498db). |
Add multiple slice-color mappings to control chart aesthetics and consistency.
Tooltip & Interface Settings
| Field | Requirement | Description |
|---|---|---|
| Enable Tooltip | Optional | Show data when hovering over slices. |
| Tooltip Text | Optional | Custom message to appear in the tooltip. |
| Add to Interface* | Required | Assign the pie chart to one or more interfaces. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Required (if grouped) | Use a device label to group data. |
| Grouped Display Mode | Optional | Choose: - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Limit widget count when using group filters. |
Use Cases
-
Visualize issue type distribution (e.g., alarms, statuses)
-
Display operating mode or state breakdown
-
Summarize user input or feedback categories
-
Show completion share per category or region
Best Practices
-
Use Donut view for modern aesthetics or compact space
-
Assign consistent slice colors for categories across dashboards
-
Enable tooltips to add extra insight without clutter
-
Avoid too many slices—group low-count items as “Other” upstream if needed
-
Combine with label grouping to scale across devices or zones
Frequently Asked Questions (FAQ)
Q: Can the chart handle dynamic categories?
A: Yes. Each unique value from the JSON key will form its own slice.
Q: What if values change frequently?
A: Set a reasonable refresh interval and calculation window to stabilize the display.
Q: Can I control which slice is shown in which color?
A: Yes, use the Color Picker section to assign hex colors to specific values.