> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/chart.md).

# Chart

## **Initial setting:**

**Model** - data model for the chart.

**Endpoint** - data source for the chart.

**Field X** - to be shown in the initial settings when **Model** is specified only.

**Field Y** - to be shown in the initial settings when **Model** is specified only.

![](/files/WPbeN3aqmCbb001hW7SF)

## **Look\&Feel Settings:**

**Title** (not mandatory) - chart title.

**Type size** (mandatory) - chart type.

**X axe caption** (not mandatory) - x-axis title.

**Aggregate by** (not mandatory) - sort by date.

**Y axe caption** (not mandatory) - y-axis title.

**Method** (not mandatory) - counting method.

**Name** (mandatory) - name of the chart.

![](/files/PEGbDJ1dl06UcAGKRZCQ)

## **Data:**

In this section, you can control the chart axes**.**

![](/files/co4OX8XTLK4sI3BdRfzh)

## **Workflow triggers:**

* **onCreate** – fires when the component is created on the page; 
* **onShow** – fires when the component changes its state to visible (displayed on the page); 
* **onHide** – fires when the component changes its state to hidden (stops being displayed); 
* **onDestroy** – fires when the component is destroyed;
* **onDataUpdate** – fires by the Chart Update Data block.

## **Component Actions:**

### **Chart Get Properties:**

Gets chart's properties

**Input** parameters:

* **Component Id** \[*string*] *-* chart component's identifier.

**Output** parameters:

* **Aggregate by** \[*enum*] - selected method of aggregation by date;
* **Method** \[*enum*] - selected counting method;
* **X axe caption** \[*string*] - x-axis title;
* **Y axe caption** \[*string*] - y-axis title;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/tCrjf9Ckz3aBfHFYrkx5)

### **Chart Set Properties:**

Sets chart's properties

**Input** parameters:

* **Component Id** \[*string*] *-* chart component's identifier;
* **Aggregate by** \[*enum*] - selected method of aggregation by date;
* **Method** \[*enum*] - selected counting method;
* **X axe caption** \[*string*] - x-axis title;
* **Y axe caption** \[*string*] - y-axis title;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/PvnL3Uy6xhaPiKJEQRO2)

### **Chart Update Properties:**

Update chart's properties

**Input** parameters:

* **Component Id** \[*string*] *-* chart component's identifier;
* **Aggregate by** \[*enum*] - selected method of aggregation by date;
* **Method** \[*enum*] - selected counting method;
* **X axe caption** \[*string*] - x-axis title;
* **Y axe caption** \[*string*] - y-axis title;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/VVMBJsATU2In89FdAbig)

### Chart Get Data

Gets data from chart

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.

**Output** parameters:

* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](/files/BfG4EYJPXE042uaMBa3W)

### Chart Set Data

Sets data for chart

**Input** parameters:

* **Component Id** \[*string*] *-* chart component's identifier.
* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](/files/0AO3SplfV5lSZVNou2p0)

### Chart Update Data

Update data for chart

**Input** parameters:

* **Component Id** \[*string*] *-* chart component's identifier.
* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](/files/MrpD5pUWYLqUSn2OLKxA)

## **Usage example:**

This element is suitable for displaying data and relationships between them. For example, the number of orders, from the date

![](/files/TQlxJAIZOPnt0OkYa3xV)