---
title: "Widgets"
slug: "widgets"
description: "Explore the widgets available in Traceable Dashboards to visualize API metrics. Learn about widget types, attributes, and configurations to create tailored, actionable dashboards for API security."
updated: 2025-10-16T08:31:04Z
published: 2025-10-16T08:31:04Z
---

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

# Widgets

Widgets are the building blocks of Dashboards in Traceable, allowing you to visualize important metrics in a way that best suits your needs. Traceable provides a variety of widgets, such as Table, Bar, Donut, etc., with each designed to represent data for simplifying analysis. By adding or customizing widgets, you can create a personalized dashboard that provides actionable insights at a glance.

#### Supported Widgets

Traceable offers the following widgets:

- Table
- Time Series
- Column
- Bar
- Donut
- Univariate

Refer to the tabs below for the steps to configure the widgets. Each widget consists of a combination of attributes, which define how and what data should be shown in it.

#### Attributes in a Widget

Traceable provides the following attributes for a widget:

| Attribute | Description |
| --- | --- |
| **Datasource** | The data origin that Traceable must interact with to display data in the widget. For example, *Issues*. > [!NOTE] > Note > > The availability of a datasource depends on whether or not it can be displayed in the widget. |
| **Selections** | The component you wish to add to the widget, such as table columns and donut chart segments. Depending on the widget you select, you can choose multiple components to add to the widget. For example, *Issue Names*, *Categories*, and the unique number of APIs corresponding to each Issue Name and Category (*Distinct count of API ID*). |
| **Filter** | Defines how you wish to filter the data displayed in the widget. You can choose the component you wish to use for filtering data along with the required operator and value from the drop-down list. For example, Issue Severity is equal to ( = ) High. |
| **Group By** | The component you wish to use for grouping similar values, and the maximum number of groups you want to show on the chart. Depending on the widget you select, you can choose multiple components by which the results must be grouped in the widget. For example, a maximum of 7 (Limit) Sensitive Data Types. |
| **Order By** | The component you wish to use for sorting the results, and the order in which you want to sort them, ASC for ascending and DESC for descending. For example, sort by Issue Category in descending order (DESC). |
| **Limit** | This defines the maximum number of elements you want to show in the widget. For example, a limit of *10* for a table widget means that a maximum of 10 rows should be shown in the table at any point in time. |

While configuring a widget, you must specify or select the above attributes and their corresponding fields according to your requirements. However, the availability of certain attributes depends on the widget you choose. For example, the *Donut* widget does not contain the *Order By* parameter as it presents data in the form of segments.

---

### Widget Configuration

The following tabs discuss the available widgets and their corresponding configuration steps.

TableTime SeriesColumnBarDonutUnivariate

The table widget organizes the data in the form of rows and columns. The cells in these rows and columns are populated with the appropriate values according to the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Selections - Filters - Group By - Order By - Limit For more information on these attributes, see the above section. > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - Actors - APIs - Security Events - Spans - Third-Party APIs - Traces - Issues |

#### Sample Widget

Following are the steps to add a sample table widget that lists multiple issues, their respective categories, and the corresponding count of unique APIs that have those issues:

![Traceable Table Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_widgets_table.png)

Table Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Table*.
2. From the **Datasource** drop-down list, select your source of data. For example, *Issues*.
3. Under **Selections**, click **+ Add Selection** and add one or more components to the table. These components form the columns of the table. For example, Issue *Name*, Issue *Category*, and unique number of APIs corresponding to each Issue *Name* and *Category* (*Distinct Count*of *API ID*).
4. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data based on the attributes you select. For example, Issue *Severity* is equal to ( = ) High (*ISSUE_SEVERITY_HIGH*).
5. Under **Group By**, click **+ Add Group By** and add one or more components based on which you want to group values. For example, Issue *Name* and *Category*.
6. Under Order By, click **+ Add Order By** and add the component based on which you wish to sort the values. Traceable, by default, selects ascending order (*ASC*) for sorting. However, you can change it to descending (*DESC*) from the drop-down list. For example, sort by Issue *Category* in descending order (*DESC*).
7. Under **Limit**, specify the maximum number of rows that you want to show in the table. For example, *50*.
8. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
9. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
10. Click **Save**. The widget is added to the bottom of the dashboard.

The time series widget organizes the data in the form of a graph. The graph is populated with the appropriate values for the past seven days according to the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Selections - Filters - Group By For more information on these attributes, see the above section > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - Security Events - Spans - Threat Activity Distribution - Traces |

#### Sample Widget

Following are the steps to add a sample time series widget that lists the count of unique APIs discovered for the *default* Environment:

![Traceable Time Series Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_time_series_widget.png)

Time Series Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Time Series*.
2. Select the **Chart Options** according to your requirements.
3. From the **Datasource** drop-down list, select your source of data. For example, *Security Events*.
4. Under **Selections**, click **+ Add Selection** and add one or more components to the table. These components form the Y-axis of the widget. For example, a unique number of Threat Actors (*Distinct count* of *Actor ID*).
5. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data based on the attributes you select. For example, *Environment* is equal to ( *IN* ) *default*.
6. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
7. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
8. Click **Save**. The widget is added to the bottom of the dashboard.

The column widget organizes the data in the form of rectangular columns. The columns populated in the widget represent the appropriate values according to the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Selections - Filters - Group By - Order By - Limit For more information on these attributes, see the above section. > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - API Entities by Endpoint Type - API Entities Count by Data Type - API Entities Count by Internal/External - APIs - Resolved Issues - Top 6 Threat Types - Top 6 Threat Types (v2) - Unresolved Issues - Issues by Status (last 7 days) |

#### Sample Widget

Following are the steps to add a sample column widget that lists the top data types discovered and their counts across authenticated APIs:

![Traceable Column Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_column_widget.png)

Column Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Column*.
2. Select the **Chart Options** according to your requirements.
3. From the **Datasource** drop-down list, select your source of data. For example, *API Entities Count by Data Type*.
4. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data based on the attributes you select. For example, *Authentication* is equal to ( = ) *true*.
5. Under **Group By**, specify the **Limit** according to your requirements. This defines the maximum number of data types that Traceable should display in the widget. Traceable, by default, sets this value to *10*. For example, a maximum of *10* (*Limit*) *Sensitive Data Types*.
6. Under **Order By**, click **+ Add Order By** and add the component based on which you want to sort the values. Traceable, by default, selects descending order (*DESC*) for sorting, however, you can change it to ascending (*ASC*) from the drop-down list. For example, sort by *Request Count* in ascending order (*ASC*).
7. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
8. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
9. Click **Save**. The widget is added to the bottom of the dashboard.

The bar widget organizes the data in the form of rectangular columns. The graph is populated with the bar height representing the appropriate values according to the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Selections - Filters - Group By - Order By - Limit For more information on these attributes, see the above section > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - API Entities by Endpoint Type - API Entities Count by Data Type - API Entities Count by Internal/External - APIs - Resolved Issues - Top 6 Threat Types - Top 6 Threat Types (v2) - Unresolved Issues - Issues by Status (last 7 days) |

#### Sample Widget

Following are the steps to add a sample bar widget that lists the top six threat types across APIs in the *production* and *staging* environments:

![Traceable Bar Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_bar_widget.png)

Bar Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Bar*.
2. Select the **Chart Options** according to your requirements.
3. From the **Datasource** drop-down list, select your source of data. For example, *Top 6 Threat Types*.
4. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data according to the attributes you select. For example, *Environment* is equal to ( = ) *production*.
5. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
6. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
7. Click **Save**. The widget is added to the bottom of the dashboard.

The donut widget organizes the data in the form of proportional segments. The size of these segments represents the proportional values according to the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Filters - Group By - Limit For more information on these attributes, see the above section. > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - API Entities by Endpoint Type - API Entities Count by Internal/External - APIs - Security Events |

#### Sample Widget

Following are the steps to add a sample donut widget that lists the count of APIs having *Auth Type* as *Basic* and *Bearer Token*, and segregates them based on internal or external:

![Traceable Donut Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_donut_widget.png)

Donut Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Donut*.
2. Select the **Chart Options** according to your requirements.
3. From the **Datasource** drop-down list, select your source of data. For example, *API Entities Count by Internal/External*.
4. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data based on the attributes you select. For example, *Auth Types* is equal to ( = ) *Basic* and *Bearer Token*.
5. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
6. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
7. Click **Save**. The widget is added to the bottom of the dashboard.

The univariate widget displays data related to a single attribute. The attribute’s value depends on the attributes you select while adding them. The following table lists the availability of attributes and datasources for this widget:

| **Attributes** | - Datasource - Selections - Filters For more information on these attributes, see the above section > [!NOTE] > Note > > Availability of the above attributes may depend on the datasource you select. |
| --- | --- |
| **Datasources** | - APIs - Text - Timestamp - Issues |

#### **Sample Widget**

Following are the steps to add a sample univariate widget that lists the count of vulnerable APIs that have *High* or *Critical* severity:

![Traceable Univariate Widget](https://cdn.document360.io/24f14f07-13d1-4684-8fae-6d8f811768ee/Images/Documentation/traceable_univariate_widget.png)

Univariate Widget

1. On the**Add Widget to Dashboard** window, under **Widgets**, click *Univariate*.
2. Select the **Chart Options** according to your requirements.
3. From the **Datasource** drop-down list, select your source of data. For example, *Issues*.
4. Under **Selections**, click **+ Add Selection** and add the components to the widget. For example, a unique number of APIs (*Distinct count* of *Endpoint ID*).
5. Under **Filters**, click **+ Add Filter** and add one or more filters by selecting the component, operator, and value from the drop-down list for each. These components filter the data based on the attributes you select. For example, the *Risk Category* is either ( *IN* ) *Low* or *Medium*.
6. Click **Apply**. The widget preview is available in the right pane. You can modify it again according to your requirements using the above settings.
7. (Optional) Modify the name and description of the widget in the **Widget Preview** pane according to your requirements.
8. Click **Save**. The widget is added to the bottom of the dashboard.

## Related

- [Boards (Overview and Custom Boards)](/boards.md)
- [Actions](/actions.md)