Grouping into Multiple Series
Generate Chart series dynamically from flat data collections using the groupBy method from the Data Query package. Transform grouped results into series by mapping each group to a series configuration—use the group value as the series name and the group items as the series data.
Use grouping when you have flat data with a grouping dimension, such as sales by product category, server metrics by hostname, user activity by region, or API latency by service name. This approach generates series dynamically instead of manually creating separate arrays for each category.
Binding Grouped Results
The Data Query package provides the groupBy method. It accepts a flat array and a GroupDescriptor, and it returns a GroupResult.
To bind grouped results, follow these rules:
- Map each
GroupResultto one Chart series. - Use the group
valueas the series name. - Use the group
itemscollection as the seriesdata. - Sort items inside each group by the category field to keep line points in order.
import { groupBy, GroupResult } from '@progress/kendo-data-query';
const grouped = groupBy(data, [{ field: 'service' }]) as GroupResult[];
this.series = grouped.map(group => ({
name: String(group.value),
items: (group.items as Sample[]).slice().sort((a, b) => a.minute - b.minute)
}));The following example shows API latency metrics grouped by service name with simulated network delays. The JSON structure panel on the right shows how flat data transforms into grouped series.
Stable Group Ordering
The Chart assigns legend order and series colors based on the series array order. Keep the group order stable so legend order and series colors stay stable across updates.
import { groupBy, type GroupResult } from '@progress/kendo-data-query';
const grouped = groupBy(data, [{ field: 'service' }]) as GroupResult[];
grouped.sort((a, b) => String(a.value).localeCompare(String(b.value)));The following example compares unsorted versus sorted group ordering side by side. Click Refresh Data to see how legend order and series colors remain stable with sorting but change randomly without it.
Missing Categories and Index Alignment
When you provide categories on the category axis, the Chart matches series values to categories by index.
If a group has fewer values, later values can shift to earlier categories.
Use null values to keep indexes aligned.
public minutes = [0, 5, 10, 15, 20];
public auth = [72, 80, null, 88, 83];
public orders = [120, 135, 128, 142, 138];The following example compares correct and incorrect handling of missing category values. The left chart shows values shifting to wrong categories without null padding, while the right chart uses null to maintain proper alignment.
When you bind to objects and set
categoryField, each point carries its category. This index alignment rule does not apply.
Custom Aggregate Functions
When your data has duplicate categories, the Chart automatically aggregates values using the default aggregate function. You can provide a custom aggregate function through the aggregate property to control how duplicate values combine.
The following example shows daily transactions grouped by region with a custom sum aggregate. Multiple transactions per region are automatically combined into totals.