# Advanced line/area chart

The Advanced Line/Area Chart displays a series of data points connected with a straight line, which can also be shown as area or radar chart. It is possible to create more complex charts than with [Basic Line Charts](/library/ui-components/basic-line-chart.md). For example, the Category Property is not limited to some data types and more visual properties are available.  

## Usage

Advanced Line/Area Charts are used to show changes or trends over a certain time, or to compare multiple datasets. 

{% hint style="info" %}
**Examples**

Advanced Line Charts examples are available in our [Showroom](https://showroom-dev.appfarm.app/ui-components/advanced-line-chart). You can view the demo, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Properties

| Property                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Data Source**               | Select a data source to display as a chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Filter**                    | Apply a filter to the selected data source.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Conditional Filters**       | Create conditional filters to apply to the selected data source.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Category Property**         | Select a data source to display as X Axis in the chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Hide Empty**                | <p>Visible when <strong>Category Property</strong> is selected.</p><p></p><p>Enable to hide categories without content. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Group By**                  | <p>Visible when <strong>Category Property of data type Datetime</strong> is selected.</p><p></p><p>Select a dimension to group the data by. If no dimension is selected, all objects will be displayed in the order given by the data source.</p>                                                                                                                                                                                                                                                                                                                                                |
| **Custom Format**             | <p>Visible when <strong>Category Property of data type Datetime and a Group By dimension</strong> is selected.</p><p></p><p>Define a custom format to override the format of the data source. Check <a href="https://momentjs.com/docs/#/displaying/format/">momentjs</a> for a complete reference.</p>                                                                                                                                                                                                                                                                                          |
| **Value Property**            | Select a data source to aggregate the data on. If no data source is selected, count will be used by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Aggregation Function**      | <p>Visible when <strong>Value Property</strong> is selected.</p><p></p><p>Select one of the functions Count, Sum, Average, Median, Minimum or Maximum to aggregate the data on.</p>                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Show Uncategorized**        | <p>Visible when <strong>Value Property</strong> is selected.</p><p></p><p>Enable to show uncategorized data as a separate category.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Area Range**                | <p>Visible when <strong>Aggregation Function Median or Average</strong> is selected.</p><p></p><p>Enable to add an area range for the aggregated value.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Default Name**              | Enter a default name for one dataset. If no dataset property is selected, only one dataset will be shown.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Dataset Property**          | <p>Disabled if a <strong>Default Name</strong> is entered.</p><p></p><p>Select a data source to split the data into datasets based on this property. If no data source is selected, all the data will be treated as a single dataset.</p>                                                                                                                                                                                                                                                                                                                                                        |
| **Color Value**               | <p>Visible when <strong>Dataset Property of data type Boolean or Integer</strong> is selected.</p><p></p><p>Set the dataset color from a data source of type Enum Type.</p>                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Use Enum Colors**           | <p>Visible when <strong>Dataset Property of type Enumerated Type</strong> is selected.</p><p></p><p>Enable to use the colors defined in each Enum Value.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Limit Datasets**            | <p>Visible when <strong>Dataset Property of type Enumerated Type</strong> is selected.</p><p></p><p>Enable to limit the dataset property by one or more Enum Values.</p>                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Stack Datasets**            | <p>Visible when <strong>Dataset Property</strong> is selected.</p><p></p><p>Define to stack datasets Normal or to 100%. By default, None is selected.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Use Static Datasets**       | <p>Only visible when <strong>Dataset Property</strong> is not defined.</p><p></p><p>Enable to use static datasets instead of defining a dataset property.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Dataset Name**              | <p>Visible when <strong>Use Static Datasets</strong> is enabled.</p><p></p><p>Enter a static name for the dataset or bind it to a data source or function.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Filter**                    | <p>Visible when <strong>Use Static Datasets</strong> is enabled.</p><p></p><p>Apply a filter to the selected data source.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Value Override**            | <p>Visible when <strong>Use Static Datasets</strong> is enabled.</p><p></p><p>Override the value if the value used for the dataset is stored in another property than the main value property.</p>                                                                                                                                                                                                                                                                                                                                                                                               |
| **Color**                     | <p>Visible when <strong>Use Static Datasets</strong> is enabled.</p><p></p><p>Define a color for the dataset.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Disable Gradient**          | Enable to lighten up the color value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Area Chart**                | Enable to transform the chart into an area chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Opacity**                   | <p>Visible when <strong>Area Chart</strong> is enabled.</p><p></p><p>Define the opacity of the area color.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show Points**               | Enable to visualize points as long as the distance between them are large enough. Otherwise, points will never be displayed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Disable Bezier**            | Enable to display straight lines instead of rounded lines between each point. May be used to increase performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Show Steps**                | <p>Visible when <strong>Disable</strong> <strong>Bezier</strong> is enabled.</p><p></p><p>Enable to draw steps between the points, instead of straight lines.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Step Align**                | <p>Visible when <strong>Show</strong> <strong>Steps</strong> is enabled.</p><p></p><p>Define whether the steps should be aligned horizontally on the left, center or right.</p>                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Title**                     | Enter a static title or bind it to a data source, function, date now or date today.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Sub Title**                 | Enter a static title or bind it to a data source, function, date now or date today.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Show Legend**               | Enable to show a legend.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Legend Position**           | <p>Visible when <strong>Show Legend</strong> is enabled.</p><p></p><p>Position the legend on the top, left, bottom or right side of the chart.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Disable Animation**         | Enable to stop animation of the chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Sort By Data**              | Enable this to sort the Categories by Ascending Value (lowest to highest). If you want to reverse this sorting, use the Reverse option on the X-Axis.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Zoom Type**                 | Define if the X Axis, Y Axis or both should be zoomable. By default, None is selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Show Data Labels**          | Enable to show data labels above each data point.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Disable Mouse Tracking**    | Enable to block the chart for mouse tracking activities.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Tooltip Value Decimals**    | Define decimals to override the number of decimals shown for the y value in the tooltip.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Polar**                     | Enable to transform the chart into the polar coordinate system. The chart is then displayed as a polar/radar chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Invert Axes**               | Enable to invert both X Axis and Y Axis with each other.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Enable Navigator**          | <p>Visible if <strong>Category Property</strong> is selected.</p><p></p><p>Enable a navigator on the X Axis.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Minimum Range**             | <p>Visible if <strong>Navigator</strong> is enabled.</p><p></p><p>Define the minimum window when zooming in. By default, one week is selected.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Maximum Range**             | <p>Visible if <strong>Navigator</strong> is enabled.</p><p></p><p>Define the maximum window when zooming out. By default, all data is selected.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Axis Title**                | Enter a static title or bind it to a data source, function, date now or date today.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Axis Type**                 | Select a type for the axis: Auto, Linear, Logarithmic, Datetime or Category.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Tick Interval**             | Set an interval for ticks on the axis. If the interval is too dense to be displayed, some ticks will be removed automatically. Note that axes with data type Datetime are based on milliseconds.                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Tick Mark Placement**       | <p>Only applicable for <strong>Category Axis</strong> (X Axis).</p><p></p><p>Define the position of the tick marks on the X Axis. If Auto is selected and the interval is 1, the tick mark is placed between categories, else the tick mark is placed in the center of the category. If Between is selected, the tick mark is always placed between categories. If On is selected, the tick mark is always placed in the center of the category.</p>                                                                                                                                             |
| **Min Value**                 | Define the minimum value on the axis. If no value is set, it will automatically adjust to data.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Max Value**                 | Define the maximum value on the axis. If no value is set, it will automatically adjust to data.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Enable Grid Lines**         | Enable to show grid lines on the axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Enable Crosshair**          | Enable a crosshair on the axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Hide Axis**                 | Enable to hide the axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Reverse Axis**              | Enable to reverse the axis in order to display the values from highest to lowest.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Place Opposite**            | Enable to place the axis on the opposite side of the chart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Synchronize Axis**          | <p>Only applicable for <strong>Category Axis</strong> (X Axis).</p><p></p><p>If selected, hover values and zoom will be synchronized across charts. To synchronize this axis with other charts, first a <strong>Topic</strong> in the current <strong>App</strong> (found under <strong>App Settings</strong>) must be created. Any chart connected to the same topic will be synchronized. Synchronization uses chart width to calculate position for the indicators, not axis values. Therefore it must be ensured, that all charts use the same width and showing the same range of data.</p> |
| **Plot Threshold Indicators** | Add plot threshold indicators by defining a name, visibility, type (line or band), start value and color.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Event Handlers**            | You may add an **On Series Click** action to be executed when the data series is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/advanced-line-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.