Angular Data Aggregations

In the Ignite UI for Angular IgxCategoryChartComponent control Data Aggregations feature allows you to group data in the chart by the unique values of a data member on the X-axis and then sort those groups. You may then apply summaries which will be reflected by the range of the Y-axis 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 on the X-axis 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
    #chart
    [dataSource]="salesData"
    initialGroups="Country"
    initialSummaries="Sum(Sales) as Sales"
    groupSorts="Sales Desc">
</igx-category-chart>

API References