Web Components Polar Chart
The Ignite UI for Web Components Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of Scatter Series and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.
Web Components Polar Area Chart
The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the Category Area Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarAreaSeriesComponent
, as shown in the example below:
Web Components Polar Spline Area Chart
The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like Polar Area Chart does. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarAreaSeriesComponent
, as shown in the example below:
Web Components Polar Marker Chart
The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the Scatter Marker Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarScatterSeriesComponent
, as shown in the example below:
Web Components Polar Line Chart
The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the Scatter Line Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarLineSeriesComponent
, as shown in the example below:
Web Components Polar Spline Chart
The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the Scatter Spline Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarSplineSeriesComponent
, as shown in the example below:
Web Components Polar Chart Styling
Once our polar 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. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcPolarAreaSeriesComponent
, as shown in the example below:
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: