Chart Widgets

Chart widgets display time-series data with customizable line charts and bar charts. You can also use various pie charts to display the latest values.

1. Enter dashboard edit mode by clicking the pencil icon.
2. Click the + sign to add a new widget.
3. Select the Charts widget bundle.
4. Choose the specific chart widget.
5. Click Add to attach a datasource.
6. Select an entity alias and add telemetry keys.
7. Click Add and then apply changes.

Chart widgets are divided into Time series and Latest values widgets. Time series widgets visualize changes in data over time. Latest values widgets display the most recent values for multiple entities.

Time series widgets visualize changes in time-series data over time. See time window for configuration details.

Displays changes to time-series data over time as vertical bars.

Displays changes to time-series data over time as a continuous line.

Displays changes to the state of an entity over time — for example, whether a device is on or off.

Latest values widgets render the most recent values of attributes or time-series data for multiple entities. Most support numeric values only.

Displays the latest values in a radar chart. Supports numeric values only.

Displays the latest values in a polar area chart.

Displays the latest values in a pie chart (Chart.js implementation).

Displays the latest values in a pie chart (Flot implementation).

Displays the latest values in a doughnut chart.

The only latest values chart widget that allows using not only numeric values.

Basic widget settings control appearance and style — title, legend, and mobile device settings. All ThingsBoard widgets share the same basic settings. Learn how to customize them in the Dashboards guide.

Advanced settings vary by widget type and configure features specific to each chart.

1.1 Stacking — when enabled, data from multiple entities is aggregated and displayed as stacked bars. Configure non-aggregated bar width, bar alignment, threshold line width, shadow size, and font color/size.

Tooltip value format function — customize the tooltip using a JavaScript function. See also tooltip settings.

1.2 Grid settings — configure background color, grid frame, ticks, line width, and visibility.

1.3 Axis settings — configure axis titles, colors, and value ranges.

1.4 Ticks formatter function — convert tick values to a compact form for large numbers.

Compare values with historical data over different time periods. Works in History time window mode only.

Display attributes in the legend using the ${} pattern syntax — for example, ${active} to show an entity’s active status.

Advanced settings for the Line Chart are the same as for the Bar Chart, with two additional options:

1. Display smooth (curved) lines — toggle between straight and curved line segments.

2. Default line width for all thresholds — set the line width and configure threshold lines.

The State Chart shares most common settings with the Bar Chart, with these additions:

• 1.1 Stacking — same as Bar Chart.
• 1.2 Display smooth (curved) lines — same as Line Chart.
• 1.3 Hover individual points — show/hide data points on hover.
• 1.4 Cumulative values in stacking mode — display cumulative totals.

1.5 Tooltip value format function — customize the tooltip display.

1.6 Grid settings — same as Bar Chart.

1.7 Axis settings — same as Bar Chart.

1.8 Ticks formatter function — same as Bar Chart.

Same as Bar Chart — compare with historical data.

Same as Bar Chart.

Set the pie radius as a fraction (0 to 1) of the available space, or use a direct pixel value.

Set the inner radius to create a donut-style pie chart.

Enable smoother transitions when data changes.

Adjust the tilt (0 to 1) to change the perspective from vertical to horizontal.

Configure the stroke color, width, and label visibility.

Configure the border color and width.

Configure legend label font color and visibility.