Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

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>