Angular Radial Chart
The Ignite UI for Angular Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line). Radial Chart is also mapping a list of categories from the minimum to the maximum of the extent of the chart, and support the category grouping mechanisms.
Angular Radial Area Chart
The Angular Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in IgxDataChartComponent
control by binding your data to IgxRadialAreaSeriesComponent
, as shown in the example below.
Angular Radial Column Chart
The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the Column Chart, but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgxDataChartComponent
control by binding your data to a IgxRadialColumnSeriesComponent
, as shown in the example below:
Angular Radial Line Chart
The Angular Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Line Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the IgxDataChartComponent
control by binding your data to IgxRadialLineSeriesComponent
, as shown in the example below:
Angular Radial Pie Chart
The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the IgxDataChartComponent
control by binding your data to a IgxRadialPieSeriesComponent
, as shown in the example below:
Angular Radial Chart Styling
Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in IgxDataChartComponent
control.
Angular Radial Chart Settings
In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the LabelMode
property for the IgxCategoryAngleAxisComponent
.
Additional Resources
You can find more information about related chart types in these topics:
API References
The following table lists API members mentioned in the above sections:
IgxDataChartComponent
IgxRadialAreaSeriesComponent
IgxRadialColumnSeriesComponent
IgxRadialLineSeriesComponent
IgxRadialPieSeriesComponent
ItemsSource
AngleAxisName
ValueAxisName
valueMemberPath
IgxCategoryAngleAxisComponent
IgxNumericRadiusAxisComponent