---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-data-series
widgetname: Data Series
description: "This documentation details configuring a chart widget for displaying data series within a UI page"
---

# Data Series

![dataSeriesIcon][dataSeriesIcon]

## Overview

The Data Series widget provides a chart view with various series to display data from the system. Below is an example of a UI Page using the Data Series widget (the chart on the bottom of the page).

![dataSeriesExample][dataSeriesExample]

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

  ![Screenshot showing a data series general settings wizard.](images/data_series_general_wizard.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![Diagram showing a data series style customization option.](images/data_series_style.png)

2. In the **Layout** tab, you can configure the Base visual properties of the widget, such as:

    * **Title** - The main heading of the chart.
    * **Subtitle** - The secondary heading of the chart.
    * **Show Animations** - Determines whether animations are enabled for chart transitions and interactions. This option is set to `false` by default.
    * **Show Subtitle Always** - Controls whether the subtitle (series names) is always visible. If set to `false` (default), the subtitle will adjust responsively based on the chart size.
    * **Show Axis Always** - Specifies whether the X and Y axes should always be displayed. By default, this is set to `false`, allowing the axes to be responsive to the chart's size.
    * **Decimal Places** - Defines the number of decimal places to display on the axes.
  
    You can also configure the Categories Axis, or X Axis, properties, namely:

    * **Show Axis Always** - Determines if the X axis labels (categories) should always be shown. The default setting is `false`, making the axis labels responsive to the chart's size.
    * **Shorten Axis Labels** - Controls whether the labels on the X axis should be shortened for improved readability. This option is set to `false` by default.
    * **Show Label on Tooltip** - Specifies if the category label should appear in tooltips when hovering over data points. This option is set to `false` by default.
    * **Data Field** - Indicates the name of the data field used for the categories, linking the chart to the appropriate dataset.
    * **Label Type** -  Defines the type of labels for the X axis, which can be String, Number, or Date/Time. For Date/Time labels, various formats are available such as Sequence, Minutes, Hours (12h or 24h format), Time, Time with Seconds, Date, Long Date, Complete Date and Time, Date and Time, Week Day, Week Day and Month Day, Week Days and Month, and Month and Year.
  
    Finally, you can define the Values Axis, or Y Axis, properties:

    * **Show Axis Always*** - Determines if the Y axis labels (values) should always be shown. The default setting is `false`, making the axis labels responsive to the chart's size.
    * **Axis Minimum** - Sets the minimum value for the Y axis, providing a lower boundary for the data range displayed.
    * **Axis Maximum** - Sets the maximum value for the Y axis, providing an upper boundary for the data range displayed.
    * **Axis Units** - Defines the units for the Y axis values.
    * **Secondary Axis** - Toggles the display of a secondary Y axis, useful for comparing two different sets of data. This option is set to `false` by default.
    * **Secondary Axis Minimum** - Sets the minimum value for the secondary Y axis.
    * **Secondary Axis Maximum** - Sets the maximum value for the secondary Y axis.
    * **Secondary Axis Units** - Defines the units for the secondary Y axis values.

    ![Screenshot showing a widget customization interface with options for setting up data series.](images/data_series_layout_wizard.png)

3. In the **Series** tab, define the series that will be displayed.

    ![Screenshot showing a UI with options for saving and customizing a data series.](images/data_series_series_wizard.png)

4. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Screenshot showing a data series links configuration wizard with options for linking to other UI elements.](images/data_series_links_wizard.png)

5. By saving and closing the settings, the widget will be changed accordingly.

## Using the Fill Settings Feature

{% include-markdown 'includes/pages/fill_settings_ui_pages_widgets.md' %}

![Screenshot showing a UI with options for "Data Series" and "Fill Settings".](images/data_series_fill_settings.png)

[dataSeriesIcon]: images/uiDataSeries.png
[dataSeriesExample]: images/uiPageExample3.png