---
title: "Pie Chart"
slug: "pie-chart-widget"
updated: 2026-04-17T07:41:36Z
published: 2026-04-17T07:41:36Z
canonical: "learn.servitly.com/pie-chart-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.

# Pie Chart

Displays a pie chart with one slice for each referenced metric value or statistic result.

![Pie Chart](https://components-manager.servitly.com/components/PieChart_1/IMAGES/_screenshot?owner=AG_Servitly)

## Template Syntax

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

```xml

<pie-chart-widget title="Counters">
   <metric name="Standby Hours"></metric>
   <metric name="Rest Hours"></metric>
   <metric name="Heating Hours"></metric>
</pie-chart-widget>
        
```

## Component Reference

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

#### Pie Chart `&lt;pie-chart-widget&gt;`

| *Chart Options* | The JSON configuring how the chart is rendered, for more details see the link:https://www.chartjs.org/docs/latest/general/responsive.html[Chart JS] documentation. **Name**: globalChartOptions **Type**: JSON \| Optional `[globalChartOptions]="{p1: true, p2: 123, p3: 'abc'}"` |
| --- | --- |
| *Color Filter* | The filter function used to draw values using a common color palette. **Name**: colorFilter **Type**: FILTER \| Optional `colorFilter="myColorFilter"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Pie Chart'"` |
| **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="my-custom-class"` |
| *Height* | The height of the widget (e.g. 250px). **Name**: height **Type**: STRING \| Optional `height="250px"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| *Width* | The width of the widget (e.g. 500px). **Name**: width **Type**: STRING \| Optional `width="500px"` |
| **Sub Elements** |
| [*Metric*](/docs/pie-chart-widget/#metric) | The metric whose value must be rendered as a slice within the chart. |
| [*Statistic*](/docs/pie-chart-widget/#statistic) | The statistic whose values must be rendered as a slices within the chart. |

#### Metric `&lt;metric&gt;`

| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| --- | --- |
| *Label* | The metric alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| *Unit* | The unit of measurement to be displayed along the value. **Name**: unit **Type**: STRING \| Optional `unit="&amp;deg;C"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

#### Statistic `&lt;statistic&gt;`

| *Aggregation* | The function used to aggregate data. **Name**: aggregation **Type**: ENUM \| Optional **Values**: *AVG*, *COUNT*, *MAX*, *MIN*, *SUM* `aggregation="AVG"` |
| --- | --- |
| *~~Alert Category~~* | The alert category used to filter the statistic results. **Name**: category **Type**: ENUM (multiple) \| Optional **Values**: *INFORMATION*, *ADVICE*, *ANOMALY*, *FAILURE*, *SAFETY* > [!CAUTION] > DEPRECATED > > Define a condition into the query property `[category]="['INFORMATION', 'ADVICE']"` |
| *~~Alert Severity~~* | The alert severity used to filter the statistic results. **Name**: severity **Type**: ENUM (multiple) \| Optional **Values**: *INFORMATIONAL*, *WARNING*, *CRITICAL*, *EMERGENCY* > [!CAUTION] > DEPRECATED > > Define a condition into the query property. `[severity]="['INFORMATIONAL', 'WARNING']"` |
| *Alert Status* | Define whether to include alerts that are still active, or have been activated in a period. **Name**: activationType **Type**: ENUM \| Optional **Values**: *ACTIVE*, *ACTIVATED* `activationType="ACTIVE"` |
| *Averaged By* | The count used to average the statistic results (e.g. Average alert count by thing). **Name**: averagedBy **Type**: ENUM \| Optional **Values**: *thingCount* `averagedBy="thingCount"` |
| *~~End Date Variable~~* | The <period-field>'s End Variable filtering data by end date. **Name**: endDateFieldRef **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Period Variable property. `endDateFieldRef="toDate"` |
| *Group By* | The property used to group results. For instance: customer.country. In the case where the underlying objects are temporally distributed you can also aggregate by HOUR, DAY, MONTH and YEAR. **Name**: groupBy **Type**: GROUP_BY \| Optional `groupBy="customer.name"` |
| *~~Include Zero Values~~* | The flag indicating whether to include or not the alerts with zero occurrences. **Name**: includeZeroValues **Type**: BOOLEAN \| Optional **Default Value**: *false* > [!CAUTION] > DEPRECATED > > This feature is no longer supported. `[includeZeroValues]="true"` |
| *~~Name~~* | The statistic whose results(s) must be loaded by the widget. **Name**: name **Type**: STATISTIC \| Required > [!CAUTION] > DEPRECATED > > Use the Resource, and select the Aggregation and Property to aggregate. `name="alertCount"` |
| *Property* | The object property whose values must be aggregated. **Name**: property **Type**: PROPERTY \| Optional `property="propName"` |
| *Resource* | The resource from which to retrieve the items to be used to calculate the statistic. **Name**: resource **Type**: ENUM \| Required **Values**: *ACTION*, *ALERT*, *EVENT*, *CUSTOMER*, *LOCATION*, *PARTNER*, *THING*, *USER*, *WORK_SESSION* **Default Value**: `resource="ACTION"` |
| *Sorting* | The sort direction used to order categories by value (default none). **Name**: sortDirection **Type**: ENUM \| Optional **Values**: *ASC*, *DESC* `sortDirection="ASC"` |
| *~~Start Date Variable~~* | The <period-field>'s Start Variable filtering data by start date. **Name**: startDateFieldRef **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Period Variable property instead. `startDateFieldRef="fromDate"` |
| *~~Sum Metric~~* | The work-session monitored metric to sum. **Name**: sumMetric **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Resource property and select the Aggregation and the Property to aggregate. `sumMetric="metrics.Pieces.DELTA"` |
| *~~Thing Definition~~* | The name of the thing-definition used to filter the statistic results. **Name**: thingDefinition **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Define a condition into the query property `thingDefinition="abc"` |
| *Value Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| **Data** |
| *Max Result Count* | The number of maximum returned results (default all results are returned). **Name**: limit **Type**: INTEGER \| Optional `limit="123"` |
| *Period Variable* | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. **Name**: periodRef **Type**: STRING \| Optional `periodRef="period"` |
| *Query* | The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. **Name**: query **Type**: QUERY \| Optional **Predicates**: *beginsWith*, *eq*, *neq*, *gt*, *gte*, *isEmpty*, *isNotEmpty*, *lt*, *lte*, *like*, *notLike* `[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"` |

## Full Syntax Example

```xml

<pie-chart-widget    
    [title]="'Pie Chart'"
    width="500px"
    height="250px"
    globalChartOptions="{p1: true, p2: 123, p3: 'abc'}"
    colorFilter="myColorFilter"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <metric        
            name="Temperature"
            label="Temperature"
            filter="fooBarFilter"
            unit="&deg;C"
            *ngIf="getUser().organizationId != null"></metric>
    <statistic        
            name="alertCount"
            resource="ACTION"
            activationType="ACTIVE"
            aggregation="AVG"
            groupBy="customer.name"
            property="propName"
            sortDirection="ASC"
            averagedBy="thingCount"
            filter="fooBarFilter"
            query="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"
            limit="123"
            periodRef="period"
            severity="['INFORMATIONAL', 'WARNING']"
            category="['INFORMATION', 'ADVICE']"
            thingDefinition="abc"
            startDateFieldRef="fromDate"
            endDateFieldRef="toDate"
            sumMetric="metrics.Pieces.DELTA"
            [includeZeroValues]="true"></statistic>
</pie-chart-widget>
```