---
title: Dashboard Widget Reference Guide
description: Use this dashboard widget reference when you already know which widget you want and need the exact settings, use case, or payload shape. This page helps you understand the available dashboard widget types in Twinnoverse and how each one is…
url: "https://twinnoverse.com/docs/dashboard-widget-reference-guide/"
updated: "2026-06-17"
category: Dashboard Builder / Dashboard Builder Design
---

# Dashboard Widget Reference Guide

Use this dashboard widget reference when you already know which widget you want and need the exact settings, use case, or payload shape.

This page helps you understand the available dashboard widget types in Twinnoverse and how each one is normally used on an operational screen.

If you are still deciding which widget family fits the use case, start with [Choosing the Right Widgets](https://twinnoverse.com/docs/how-to-choose-the-right-dashboard-widgets/).

---

## Dashboard Widget Types

| Widget | Best For |
| --- | --- |
| [KPI (Single / Double)](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#1-toc-title) | one or two headline values |
| [KPI Pie](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#2-toc-title) | percentage-style values |
| [Sparkline](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#3-toc-title) | compact trends |
| [Progress Bar](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#4-toc-title) | current versus total |
| [Target Actual (Vertical)](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#5-toc-title) | target versus actual |
| [Table List](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#6-toc-title) | row-based operational detail |
| [Alerts List](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#7-toc-title) | alarms, warnings, incidents |
| [Clock](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#8-toc-title) | date and time |
| [Text Block](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#9-toc-title) | notes, messages, overlays |
| [Content (Image)](https://twinnoverse.com/docs/dashboard-widget-reference-guide/#10-toc-title) | images, diagrams, plans |

---

## 1. KPI (Single / Double) Widget

Use KPI widgets for one or two values that should be readable at a glance on a dashboard or TV screen.

Typical uses:

- production count
- OEE
- uptime
- scrap count

Expected payload pattern:

```
{
  "kpi": {
    "YOUR_LABEL": {
      "value": 1247,
      "secondaryValue": 0
    }
  }
}
```

---

## 2. KPI Pie Widget

Use KPI Pie for percentage or utilization-style values on a dashboard.

Expected payload pattern:

```
{
  "pie_widget": {
    "YOUR_LABEL": {
      "chartLabel": "QTE Split",
      "segments": [
        { "name": "OK", "value": 1116 },
        { "name": "NOK", "value": 84 }
      ]
    }
  }
}
```

---

## 3. Sparkline Widget

Use Sparkline when you need a compact trend line widget.

Expected payload pattern:

```
{
  "sparkline": {
    "YOUR_LABEL": {
     "value": 1240,
     "series": [1180, 1205, 1198, 1210, 1222, 1240]
    }
  }
}
```

---

## 4. Progress Bar Widget

Use Progress Bar for current-versus-total progress on a dashboard.

Expected payload pattern:

```
{
  "progress_bar": {
    "YOUR_LABEL": {
      "current": 22,
      "total": 100
    }
  }
}
```

---

## 5. Target Actual (Vertical) Widget

Use this widget for planned-versus-actual comparison.

Expected payload pattern:

```
{
  "target_actual_vertical": {
    "YOUR_LABEL": {
      "chartLabel": "Actual vs Objective",
      "bars": [
        { "label": "08:00", "value": 20, "target": 100 },
        { "label": "09:00", "value": 78, "target": 100 },
        { "label": "10:00", "value": 103, "target": 100 }
      ]
    }
  }
}
```

---

## 6. Table List Widget

Use Table List for ranked items, operational rows, or top-N summaries.

Use cases:

- defect list
- production ranking
- work orders
- machine rows

Expected payload pattern:

```
{
  "table_list": {
    "YOUR_LABEL": {
      "items": [
        ["1", "Scratch", "12"],
        ["2", "Missing part", "9"],
        ["3", "Paint issue", "6"]
      ]
    }
  }
}
```

---

## 7. Alerts List Widget

Use Alerts List for warnings, incidents, alarms, and issues that should look like a live queue.

Use cases:

- machine alerts
- quality incidents
- downtime reasons

Expected payload pattern:

```
{
  "alerts_list": {
    "YOUR_LABEL": {
      "items": [
        {
          "time": "09:00",
          "count": 1,
          "label": "Sensor anomaly",
          "severity": "warning"
        },
        {
          "time": "10:00",
          "count": 1,
          "label": "Conveyor blockage",
          "severity": "critical"
        }
      ]
    }
  }
}
```

---

## 8. Clock Widget

Use Clock only when the time or date adds useful context to the screen.

The Clock widget is normally display-only. It does not usually need a runtime payload from your data source.

---

## 9. Text Block Widget

Use Text Block for explanatory text, shift notes, or overlay-style messages.

This widget is also useful in campaigns and event-driven layouts.

```
{
  "text_block": {
    "YOUR_LABEL": {
      "title": "Message title",
      "body": "Message body"
    }
  }
}
```

---

## 10. Content (Image) Widget

Use Content when the screen needs a static image, diagram, floor plan, or reference visual.