---
title: "Metrics Data"
slug: "metrics-data-widget"
updated: 2026-09-18T07:24:32Z
published: 2026-09-18T07:24:32Z
canonical: "learn.servitly.com/metrics-data-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Metrics Data

The widget that displays the current value of all thing metrics.

![Metrics Data](https://components-manager.servitly.com/components/MetricsData_1/IMAGES/_screenshot?owner=AG_Servitly)

All the thing definition metrics are automatically displayed and grouped into different boxes by using the *Group* property defined on each metric.

![](https://help.servitly.com/hc/article_attachments/11969497707549)

The following information is displayed for each metric:

- The localized Label or the Name as a fallback. In case the label is too long, it is truncated, and a tooltip allows displaying the full label.
- The description, which can be visible as a tooltip on the information icon.
- The last value, by using a default filter and unit of measurement.
- The Quick History allowing to inspect the historical values of each metric, which can also be exported.

![](https://help.servitly.com/hc/article_attachments/11969616223133)

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <metrics-data-widget class="flex-fill" [title]="'All Metrics Value'"></metrics-data-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Metrics Data `&lt;metrics-data-widget&gt;`

| *Export Enabled* | The boolean flag indicating whether the data export is enabled. **Name**: config.exportEnabled **Type**: BOOLEAN \| Optional **Default Value**: *false* `[config]="{exportEnabled: true}"` |
| --- | --- |
| *Groups Names* | The comma separated list of group names used to filter metrics. Start with '!' to exclude groups. **Name**: config.groupNames **Type**: STRING \| Optional `[config]="{groupNames: 'abc'}"` |
| *Max Columns per Group* | The maximum number of columns used to spread the metrics of a single group. **Name**: config.maxColumnsPerGroup **Type**: INTEGER \| Optional **Default Value**: *3* `[config]="{maxColumnsPerGroup: 123}"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Metrics Data'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="abc"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<metrics-data-widget    
    [title]="'Metrics Data'"
    [config]="{
        maxColumnsPerGroup: 123,
        exportEnabled: true,
        groupNames: 'abc'
    }"
    class="abc"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
</metrics-data-widget>
```