Angular Pie Chart

    The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.

    Angular Pie Chart Example

    You can create the Angular Pie Chart in the IgxPieChartComponent by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department.

    Angular Pie Chart Recommendations

    Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include:

    • Pie
    • Doughnut (Ring)
    • Funnel
    • Stacked Area
    • Stacked 100% Area (Stacked Percentage Area)
    • Stacked Bar
    • Stacked 100% Bar (Stacked Percentage Bar)
    • Treemap
    • Waterfall

    The Angular Pie Chart includes interactive features that give the viewer tools to analyze data, like:

    • Legends
    • Slice Explosion
    • Slice Selection
    • Chart Animations

    Best Practices for a Pie Chart:

    • Comparing slices or segments as percentage values in proportion to a total value or whole.
    • Showing how a group of categories is broken into smaller segments.
    • Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data).
    • Ensuring data segments add up to 100%.
    • Arranging the order of data from largest (highest) to smallest (least).
    • Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise.
    • Ensuring the color palette is distinguishable for segments/slices of the parts.
    • Considering data labels in segments vs. legends for ease of reading.
    • Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension.
    • Avoiding positioning multiple pie charts next to each other for comparative analysis.

    Do Not Use Pie Chart When:

    • Comparing change over time —use a Bar, Line or Area chart.
    • Requiring precise data comparison —use a Bar, Line or Area chart.
    • You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story.
    • It would be easier for the viewer to perceive the value difference in a Bar chart.

    Angular Pie Chart Legend

    Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click.

    In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the IgxLegendComponent property. The legendLabelMemberPath can then be used to specify which property on your data model it will use to display inside the legend for each pie slice.

    Additionally you can use the legendItemTemplate and legendItemBadgeTemplate properties and the various font properties on ItemLegend to further customize the look of the legend items.

    Angular Pie Chart Others Category

    Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice

    In the sample below, the othersCategoryThreshold is set to 2, and othersCategoryType is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category.

    If you set othersCategoryType to Percent, then othersCategoryThreshold will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever othersCategoryType is most appropriate for your application.

    Angular Pie Chart Explosion

    The pie chart supports explosion of individual pie slices as well as a SliceClick event that allows you to modify selection states and implement custom logic

    Angular Pie Chart Selection

    The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the selectedItems property. The selected slices are then highlighted.

    There is a property called selectionMode which is how you set what mode you want the pie chart to use. The default value is Single. In order to disable selection, set the property to Manual.

    The pie chart supports three different selection modes.

    • Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected.
    • Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected.
    • Manual - When the mode is set to Manual, selection is disabled.

    The pie chart has 4 events associated with selection:

    • SelectedItemChanging
    • SelectedItemChanged
    • SelectedItemsChanging
    • SelectedItemsChanged

    The events that end in “Changing” are cancelable events which means you can stop the selection of a slice by setting the event argument property Cancel to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it.

    For scenarios where you click on the Others slice, the pie chart will return an object called IgxPieSliceOthersContext. This object contains a list of the data items contained within the Others slice.

    Angular Pie Chart Animation

    You can animate the pie chart smoothly by setting the radiusFactor property, which will scale the chart's radius. Also set the startAngle property to angle the chart such that it keep increasing the chart angle while rotating.

    In the code below, the radiusFactor is increasing the chart by 0.25% of the size, and startAngle is rotating the chart by 1 degree. When radiusFactor and startAngle reached to its maximum limit the animation is stopped by reset the animation flag and clear the interval.

    Angular Pie Chart Styling

    Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below:

    Angular Radial Pie Chart

    The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and 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.

    Additional Resources

    API References

    The following table lists API members mentioned in the above sections:

    Chart Type Control Name API Members
    Pie Chart IgxPieChartComponent PieChart
    Radial Pie Chart IgxDataChartComponent IgxRadialPieSeriesComponent