---
title: LineChart Widget
description: "**Purpose:** The `LineChart` widget is designed to visualize data points over a continuous interval or time series. It is the standard choice for tracking a metric's history to identify trends, patterns, or anomalies. Table Of Contents - [Anatomy](#anatomy) - [Configuration Settings](#configuration-settings) - [Data…"
url: "https://twinnoverse.com/docs/linechart-widget/"
updated: "2025-10-14"
category: Digital twin / Digital Twin Widget System / Digital Twin Widget Library Reference
---

# LineChart Widget

**Purpose:** The `LineChart` widget is designed to visualize data points over a continuous interval or time series. It is the standard choice for tracking a metric's history to identify trends, patterns, or anomalies.

    Table Of Contents

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

---

## Anatomy

- **Title:** The name of the chart.
- **Line:** A line connecting a series of data points, showing the progression of the data.
- **X-Axis:** Displays the labels for each data point, typically representing time or sequence.
- **Y-Axis:** Displays the scale for the values.
- **Tooltip:** Appears when hovering over the chart to show precise values.
- **Expand Button:** If a "Large View" is configured, this button appears to open a more detailed, often scrollable, view of the chart.

---

## Configuration Settings

When adding a `LineChart` 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 (e.g., timestamps). Defaults to `"labels"`. |
|  | **Values Key** | Text Input | The key inside the nested object that points to the **array of numbers** for the Y-axis values. Defaults to `"values"`. |
| **Alerts** | *-* | - | Not supported yet. |
| **Floating Icon** | *-* | - | Not supported yet. |

---

## Data Schema

The `LineChart` 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: `"server_cpu_load"`
- Labels Key: `"timestamps"`
- Values Key: `"cpu_percent"`

**Expected JSON Payload:**

```
{
  "server_cpu_load": {
    "timestamps": ["14:00", "14:05", "14:10", "14:15", "14:20"],
    "cpu_percent": [15.2, 18.0, 17.5, 25.3, 22.1]
  }
}
```

---

## Use Cases

- Tracking a sensor's temperature over the last hour.
- Monitoring CPU or memory usage of a server over time.
- Visualizing a stock price history.
- Showing daily energy consumption for a building.