Chart (Angular)
This guide demonstrates how to use the Chart component.
Column, Line, Bar and Area Chart Properties
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘chart’ + index suffix | Unique name of the Chart. |
| ChartType | string | null | Chart type. area, bar, line or column. |
| Data | array | null | Chart data. |
| ValueProperty | string | null | Chart data value property. |
| CategoryProperty | string | null | Chart data category property. |
| Series | string | null | Chart data series property. |
| Legend | boolean | false | Is Chart legend visible. |
Column chart
Bar chart
Line chart
Area chart
Column, Line, Bar and Area Angular declaration
<rz-chart #chart0 categoryProperty="ProductName" chartType="Area" [data]="getProductsResult"
[legend]="false" valueProperty="ProductPrice">
</rz-chart>
Pie and Donut Chart Properties
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘chart’ + index suffix | Unique name of the Chart. |
| ChartType | string | null | Chart pie or donut. |
| Icon | string | null | DataGrid icon. |
| Title | string | null | Chart title. |
| TitleColor | string | null | Chart title color. |
| TitleBackground | string | null | Chart title background color. |
| Data | array | null | Chart data. |
| ValueProperty | string | null | Chart data value property. |
| CategoryProperty | string | null | Chart data category property. |
| Legend | boolean | false | Is Chart legend visible. |
| Labels | boolean | false | Are Chart labels visible. |
Pie chart
Donut chart
Pie and Donut Angular declaration
<rz-pie #pie0 categoryProperty="Id" chartType="Pie" [data]="getProductsResult"
[legend]="true" valueProperty="ProductPrice">
</rz-pie>