Close
Angular React Web Components Blazor

Angular Data Aggregations

In the Ignite UI for Angular CategoryChart control Data Aggregations feature allows you to group data in the chart by unique values on the XAxis and then sort those groups. You may then apply summaries which will be reflected by the range of the YAxis and will be displayed in the tooltip when hovering the series.

Angular Data Aggregations Example

The following example depicts a Column Chart that groups by the Country member of the XAxis and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.

Note, the abbreviated functions found within the dropdowns for InitialSummaries and GroupSorts have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc

<igx-category-chart
    [dataSource]="salesData"
    initialGroups="country"
    initialSummaries="Sum(sales) as Sales"
    groupSorts="Sales Desc">
</igx-category-chart>

API References