Performance

Update only what changes

Keep data stable while changing titles, colours, value formatting or tooltips through options. Replace the affected data objects when source values change. Changing series visibility can recalculate the layout. Avoid rebuilding data and configuration on every touch event.

Choose a readable density

Show the period and series needed for the task. Use supported zoom or scrolling to explore detail. Each chart reference lists its input limits and supported interactions. Keep exact values available in the tooltip instead of drawing a label on every point.

Let the container set the size

Give the chart a bounded container and let it follow the available width. The same component adapts to portrait, landscape and tablet split view. Increase appearance.minPlotWidth only when the plot needs horizontal scrolling.

Pause retained screens

Remove the chart component when its screen is destroyed. If navigation keeps the screen mounted but hidden, bind visible to the same visibility state used by your navigation. This component derives rendering.active from that input and keeps its options state local to the screen. Application inactivity also suspends native chart work automatically.

import {Component, signal, computed, input} from '@angular/core';
import {NativeDataChart, NativeChartType, type NativeLineData, type NativeChartOptions}
  from '@neural-charts/native';

const visits = {
  type: NativeChartType.Line,
  axes: {x: {type: 'category', values: [
    {id: 'mon', label: 'Mon'}, {id: 'tue', label: 'Tue'},
    {id: 'wed', label: 'Wed'}, {id: 'thu', label: 'Thu'},
    {id: 'fri', label: 'Fri'}, {id: 'sat', label: 'Sat'},
    {id: 'sun', label: 'Sun'},
  ]}, y: {type: 'linear'}},
  series: [
    {id: 'visits', name: 'This week', data: [
      {id: 'mon', x: 'mon', y: 29}, {id: 'tue', x: 'tue', y: 35},
      {id: 'wed', x: 'wed', y: 31}, {id: 'thu', x: 'thu', y: 46},
      {id: 'fri', x: 'fri', y: 42}, {id: 'sat', x: 'sat', y: 57},
      {id: 'sun', x: 'sun', y: 64},
    ]},
    {id: 'comparison', name: 'Previous week', data: [
      {id: 'mon', x: 'mon', y: 20}, {id: 'tue', x: 'tue', y: 25},
      {id: 'wed', x: 'wed', y: 22}, {id: 'thu', x: 'thu', y: 30},
      {id: 'fri', x: 'fri', y: 36}, {id: 'sat', x: 'sat', y: 34},
      {id: 'sun', x: 'sun', y: 44},
    ]},
  ],
} as const satisfies NativeLineData;

@Component({
  selector: 'app-chart-screen',
  imports: [NativeDataChart],
  template: '<neu-c-chart [data]="data()" [options]="options()" />',
})
export class ChartScreen {
  readonly data = signal<NativeLineData>(visits);
  readonly visible = input(true);
  readonly options = computed<NativeChartOptions<NativeChartType.Line>>(() => ({
    title: 'Weekly visits',
    rendering: {active: this.visible()},
  }));
}