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, observables with the async pipe, or signals.
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 |
| Signals | Call .set() or .update() | Component state with frequent updates |
| toSignal() | Source observable emits | Bridge from observable services to signal-based components |
| toObservable() | Signal value updates | Bridge from signals to templates using async pipe |
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.
Signal Updates
The Chart updates when the signal value changes. Always create a new array reference when you add, remove, or replace items. Signals track changes through reference equality, so modifying an array in place will not trigger updates.
// Create a signal
public data = signal<DataItem[]>([
{ category: 'Mon', value: 120 },
{ category: 'Tue', value: 150 }
]);
// Add a new item with a new array reference
this.data.update(items => [...items, { category: 'Wed', value: 180 }]);
// Reset with a new array
this.data.set([
{ category: 'Mon', value: 120 },
{ category: 'Tue', value: 150 }
]);The following example tracks daily patient visits using signals for state management.
RxJS Interop with Signals
Use utilities from @angular/core/rxjs-interop to bridge between observables and signals. These utilities help you integrate signal-based components with existing observable-based services and patterns. See the RxJS Interop guide for more details.
Using toSignal Function
Use toSignal() when a service returns an observable and your component uses signals. This function converts the observable into a signal and automatically manages subscriptions. The Chart reads the signal value and updates when the source observable emits.
import { toSignal } from '@angular/core/rxjs-interop';
private data$ = this.service.getData();
public data = toSignal(this.data$, { initialValue: [] });The following example shows quarterly revenue data loaded from a service observable. The toSignal() function converts the service observable into a signal that the Chart reads directly.
Using toObservable Function
Use toObservable() when your component has a signal and your template uses the async pipe. This function converts a signal into an observable, letting you leverage existing RxJS operators and patterns while maintaining signal-based state in your component.
import { toObservable } from '@angular/core/rxjs-interop';
public dataSignal = signal<DataItem[]>([...]);
public data$ = toObservable(this.dataSignal);The following example tracks production output with signal-based state management. The toObservable() function bridges the signal state to the template's async pipe.