Updating Chart Data
The Chart uses Angular's OnPush change detection strategy and only updates when it detects reference changes. Choose your update pattern based on how your component manages state—immutable arrays or observables with the async pipe.
Update Patterns
The following table shows how to trigger Chart updates for each data binding pattern:
| Pattern | Update trigger | When to use |
|---|---|---|
| Plain arrays | Assign a new array reference | Static data that changes occasionally |
| Observables + async | Observable emits a new value | HTTP APIs, streaming data, or services |
Immutable Array Updates
When you bind to arrays, create a new reference instead of mutating the existing array. The Chart uses Angular's OnPush change detection strategy, which only detects changes when object references change.
// ✅ Create a new reference
this.data = [...this.data, newItem];
// ❌ Avoid mutating the existing array
this.data.push(newItem);When you work with nested structures, clone the parent object first, then update the nested properties. This ensures the Chart detects all changes in the object hierarchy.
The following example shows data updating at configurable intervals using immutable array patterns.
Observable Updates
When you bind to an observable through the async pipe, the Chart updates automatically on every emission. The async pipe handles subscription management and triggers change detection when new data arrives.
The following example compares monthly revenue against target values with automatic updates every 2 seconds. The observable emits new data, and the Chart renders both column and line series automatically.