Binding to Series
The Chart visualizes data through one or more series. Each series transforms your data into visual elements like bars, lines, or points. Bind data to Chart series through the data input or the series configuration. The Chart accepts number arrays for simple values, object arrays for structured data, observables for HTTP requests, and signals for reactive state.
Binding Data to Series
Pass data directly to the series data input. For number arrays, the Chart uses the values directly. For object arrays, use the field property to map to the value.
<kendo-chart>
<kendo-chart-series>
<!-- Number array -->
<kendo-chart-series-item [data]="[120, 200, 150, 80, 70]"></kendo-chart-series-item>
<!-- Object array with field mapping -->
<kendo-chart-series-item [data]="data" field="sales"></kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>The following example shows different data formats working together in a single chart.
The Chart accepts different data formats depending on your needs:
| Format | Example | When to use |
|---|---|---|
| Number array | [20, 40, 35, 50] | Simple numeric values |
| Nested arrays | [[1, 20], [2, 40]] | Value pairs for XY charts |
| Object array | [{ month: 'Jan', sales: 120 }] | Structured business data |
| Observable | data$ | async | HTTP requests or streams |
| Signal | dataSignal() | Reactive component state |
Different Chart types use different properties to map data fields. Categorical Charts use field and categoryField, while XY Charts like Scatter and Bubble use xField, yField, and sizeField. For complete field requirements and binding examples, see the data binding documentation for Line, Scatter, Bubble, and other series types.
When you bind the Chart to dates, the category axis provides special behavior for time series. For more information, see Displaying Time Series.
Binding to Remote Data
Bind the series to an observable and use the async pipe for HTTP APIs and other async sources. The async pipe subscribes, triggers change detection on emissions, and unsubscribes when the component destroys. For more information, see Updating Chart Data.
The following example shows real-time server CPU monitoring with data updating every second. The observable emits new data points, and the Chart automatically updates through the async pipe.
Handling Duplicate Categories
When multiple points share the same category, the Chart groups them and computes a single value per category. By default, the Chart uses the maximum value from the group. For more information, see Grouping into Multiple Series.
The following example shows multiple sales transactions aggregated by product using the sum function.