Angular Polar Chart

    The Ignite UI for Angular 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.

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarAreaSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarAreaSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarScatterSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarLineSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarSplineSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxPolarAreaSeriesComponent, 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: