---
title: BarChart Widget
description: "**Purpose:** The `BarChart` widget is used to visualize a dataset containing multiple categories and their corresponding numerical values. It is ideal for comparing values across different items at a single point in time, such as the output of several machines. Table Of Contents…"
url: "https://twinnoverse.com/docs/barchart-widget/"
updated: "2025-10-14"
category: Digital twin / Digital Twin Widget System / Digital Twin Widget Library Reference
---

# BarChart Widget

**Purpose:** The `BarChart` widget is used to visualize a dataset containing multiple categories and their corresponding numerical values. It is ideal for comparing values across different items at a single point in time, such as the output of several machines.

    Table Of Contents

- [Anatomy](#anatomy)
- [Configuration Settings](#configuration-settings)
- [Data Schema](#data-schema)
- [Use Cases](#use-cases)

---

## Anatomy

- **Title:** The name of the chart.
- **Bars:** A series of vertical bars where the height of each bar represents its value.
- **X-Axis:** Displays the labels for each category.
- **Y-Axis:** Displays the scale for the values.

---

## Configuration Settings

When adding a `BarChart` widget in the Asset Editor, you will be presented with the following settings.

| Group | Setting | UI Control | Description |
| --- | --- | --- | --- |
| **Datasource** | **Datasource** | Dropdown | The datasource to stream data from. |
|  | **Data Key** | Text Input | The top-level key in your JSON payload that contains the nested object with your chart data. |
| **Display** | **Title** | Text Input | The display name shown at the top of the chart. |
| **Data Mapping** | **Labels Key** | Text Input | The key inside the nested object that points to the **array of strings** for the X-axis labels. Defaults to `"labels"`. |
|  | **Values Key** | Text Input | The key inside the nested object that points to the **array of numbers** for the bar values. Defaults to `"values"`. |
| **Alerts** | *-* | - | Not supported yet. |
| **Floating Icon** | *-* | - | Not supported yet. |

---

## Data Schema

The `BarChart` widget expects the payload to contain a key (matching the widget's **Data Key**) that points to a nested JSON object. This object must contain two arrays: one for labels and one for values. The arrays must have the same number of elements.

**Example:**

- Data Key: `"production_output"`
- Labels Key: `"machines"`
- Values Key: `"units_per_hour"`

**Expected JSON Payload:**

```
{
  "production_output": {
    "machines": ["Machine A", "Machine B", "Machine C"],
    "units_per_hour": [112, 124, 98]
  }
}
```

---

## Use Cases

- Comparing the production output of multiple factory lines.
- Visualizing error counts by category.
- Showing inventory levels for a set of products.