Angular Data Aggregations

    In the Ignite UI for Angular IgxCategoryChartComponent 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

    The following is a list of API members mentioned in the above sections:

    [!Note] Chart Aggregation will not work when using includedProperties | excludedProperties. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.