Component API
Create a chart screen
Import NativeDataChart and bind data and options. Open this complete example if you are creating your first chart screen; use the reference below when you need a particular input, model or event.
import {Component, signal} from '@angular/core';
import {GestureRoot} from '@ng-native/components/gestures';
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'}]},
y: {type:'linear'},
},
series: [{id:'visits',name:'Visits',data:[
{id:'mon',x:'mon',y:29}, {id:'tue',x:'tue',y:0},
]}],
} as const satisfies NativeLineData;
@Component({
imports: [GestureRoot, NativeDataChart],
template: '<gesture-root><neu-c-chart [data]="data()" [options]="options" /></gesture-root>',
})
export class ChartScreen {
readonly data = signal<NativeLineData>(visits);
readonly options = {
title: 'Weekly visits',
axes: {y: {title:'Visits'}},
legend: {position:'bottom'},
tooltip: {content:'shared', pinnable:true},
} as const satisfies NativeChartOptions<NativeChartType.Line>;
}Inputs
Pass values with square-bracket bindings in the template. data is required; options configures how those values are presented and explored.
Two-way state
Use this optional model when the chart and your app both control the visible series. The chart still manages legend taps without a binding.
Output events
Bind an output with parentheses when a chart action should update your screen or application state. Open an event for its payload, a practical use case and a complete example.
Control zoom from code
Use a viewChild query only when your own controls need to change the visible range. Configure options.viewport for a chart that supports zoom. Ordinary selection and legend use need no component reference.
import {Component, signal, viewChild} from '@angular/core';
import {GestureRoot} from '@ng-native/components/gestures';
import {Text, Pressable} from '@ng-native/components';
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: 'Visits',
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}],
}],
} as const satisfies NativeLineData;
@Component({
selector: 'app-chart-screen',
imports: [GestureRoot, NativeDataChart, Text, Pressable],
template: `<gesture-root>
<neu-c-chart [data]="data" [options]="options" />
<pressable accessibilityRole="button" (press)="chart().zoomBy(2)"><text>Zoom in</text></pressable>
<pressable accessibilityRole="button" (press)="showWorkingDays()"><text>Show Monday to Friday</text></pressable>
<pressable accessibilityRole="button" (press)="chart().resetViewport()"><text>Reset range</text></pressable>
<text>{{ rangeStatus() }}</text>
</gesture-root>`,
})
export class ChartScreen {
readonly data = visits;
readonly options = {viewport: {axes: 'x'}} satisfies NativeChartOptions<NativeChartType.Line>;
readonly chart = viewChild.required(NativeDataChart);
readonly rangeStatus = signal('');
showWorkingDays(): void {
const accepted = this.chart().setViewport({x: {firstId: 'mon', lastId: 'fri'}});
this.rangeStatus.set(accepted ? 'Range applied' : 'Range could not be applied');
}
}Chart options
Use options to change titles, colours, axes, legends, tooltips or animation. The complete line-chart example below has a button that hides the legend while preserving its other settings and the title. The data stays unchanged.
- options is optional. A plain object is enough for fixed settings; use a signal for settings that change.
- Merge the existing option group when changing one property. Each chart’s reference lists its compatible groups and values.
import {Component, signal} from '@angular/core';
import {GestureRoot} from '@ng-native/components/gestures';
import {Text, Pressable} from '@ng-native/components';
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'}]},
y: {type: 'linear'},
},
series: [{
id: 'visits', name: 'Visits',
data: [{id: 'mon', x: 'mon', y: 29}, {id: 'tue', x: 'tue', y: 35}],
}],
} as const satisfies NativeLineData;
@Component({
selector: 'app-chart-screen',
imports: [GestureRoot, NativeDataChart, Text, Pressable],
template: `<gesture-root>
<neu-c-chart [data]="data" [options]="options()" />
<pressable accessibilityRole="button" (press)="hideLegend()">
<text>Hide the legend</text>
</pressable>
</gesture-root>`,
})
export class ChartScreen {
readonly data = visits;
readonly options = signal<NativeChartOptions<NativeChartType.Line>>({
title: 'Visits',
legend: {position: 'bottom', visible: true},
});
hideLegend(): void {
this.options.update(current => ({
...current,
legend: {...current.legend, visible: false},
}));
}
}Customize tooltips and labels
Import NativeChartTooltipTemplate in your screen and place an ng-template with neuChartTooltip inside neu-c-chart. Set options.tooltip.mode to docked. The template receives the active observation and, when applicable, shared rows. Bind labelFormatters on the chart and define its callbacks in the screen class.
- dataLabel formats point value labels. legendLabel formats the text of legend entries.
- xAxisLabel and yAxisLabel format cartesian ticks. The context provides the default text and the original value when the scene carries it. For a secondary Y axis, the context axis is secondaryY.
- Return undefined to keep the default label. Keep the formatters in the component class alongside data and options.
Share a typed configuration
Move reusable settings to a separate file. NativeChartOptions<NativeChartType.Line> checks the groups and values supported by a line chart. Import lineOptions in chart-screen.ts and assign readonly options = lineOptions inside ChartScreen. Its template binds [options]="options".
import {NativeChartType, type NativeChartOptions} from '@neural-charts/native';
export const lineOptions = {
title: 'Activity',
legend: {position: 'bottom', interactive: true},
tooltip: {content: 'shared', pinnable: true},
} as const satisfies NativeChartOptions<NativeChartType.Line>;NativeChartType
Import NativeChartType as a value from @neural-charts/native. Use NativeChartType.Line in data.type and NativeChartOptions<NativeChartType.Line> for its compatible option groups. The 61 members below cover every public data discriminator. Horizontal bars use NativeChartType.Column with data.orientation: 'horizontal'; Bar is a catalog presentation, not a separate enum value. Existing string literals remain valid.
export enum NativeChartType {
Line = 'line',
Spline = 'spline',
Area = 'area',
AreaSpline = 'areaspline',
AreaRange = 'arearange',
AreaSplineRange = 'areasplinerange',
Streamgraph = 'streamgraph',
Fan = 'fan',
Column = 'column',
ColumnRange = 'columnrange',
Variwide = 'variwide',
Lollipop = 'lollipop',
Dumbbell = 'dumbbell',
ColumnPyramid = 'columnpyramid',
Waterfall = 'waterfall',
Pie = 'pie',
Donut = 'donut',
VariablePie = 'variablepie',
Item = 'item',
Scatter = 'scatter',
Bubble = 'bubble',
PackedBubble = 'packedbubble',
Polygon = 'polygon',
Mixed = 'mixed',
Pareto = 'pareto',
Regression = 'regression',
Gauge = 'gauge',
Bullet = 'bullet',
RadialBar = 'radialbar',
Heatmap = 'heatmap',
Tilemap = 'tilemap',
Contour = 'contour',
Treemap = 'treemap',
Dendrogram = 'dendrogram',
Organization = 'organization',
TreeGraph = 'treegraph',
NetworkGraph = 'networkgraph',
Sankey = 'sankey',
Sunburst = 'sunburst',
Histogram = 'histogram',
BellCurve = 'bellcurve',
BoxPlot = 'boxplot',
ErrorBar = 'errorbar',
Violin = 'violin',
Radar = 'radar',
Polar = 'polar',
WindRose = 'windrose',
XRange = 'xrange',
Timeline = 'timeline',
Flame = 'flame',
DependencyWheel = 'dependencywheel',
ArcDiagram = 'arcdiagram',
Chord = 'chord',
Funnel = 'funnel',
Pyramid = 'pyramid',
Parallel = 'parallel',
Vector = 'vector',
WindBarb = 'windbarb',
Venn = 'venn',
WordCloud = 'wordcloud',
Pictorial = 'pictorial',
}Configure and replay animation
This complete screen animates a line chart over 800 ms. The Replay button calls replay(), which increases animation.revision. The chart clears its selection and starts the entrance animation again, preserving the other options.
- durationMs controls the duration in milliseconds: 800 means 0.8 seconds. The default is 1100; the accepted range is 0–2000.
- enabled: false disables the entrance animation. A duration of 0 also shows the final chart immediately.
- revision is a replay counter, not a duration. Increase it for each replay; leave it unchanged for ordinary option edits.
- System reduced motion takes priority. Animation styles and easing curves are chosen by the renderer and are not configurable.
import {Component, signal} from '@angular/core';
import {GestureRoot} from '@ng-native/components/gestures';
import {Text, Pressable} from '@ng-native/components';
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'}]},
y: {type: 'linear'},
},
series: [{
id: 'visits', name: 'Visits',
data: [{id: 'mon', x: 'mon', y: 29}, {id: 'tue', x: 'tue', y: 35}],
}],
} as const satisfies NativeLineData;
@Component({
selector: 'app-chart-screen',
imports: [GestureRoot, NativeDataChart, Text, Pressable],
template: `<gesture-root>
<neu-c-chart [data]="data" [options]="options()" />
<pressable accessibilityRole="button" (press)="replay()">
<text>Replay</text>
</pressable>
</gesture-root>`,
})
export class ChartScreen {
readonly data = visits;
readonly options = signal<NativeChartOptions<NativeChartType.Line>>({
animation: {enabled: true, durationMs: 800, revision: 0},
});
replay(): void {
this.options.update(current => ({
...current,
animation: {
...current.animation,
revision: (current.animation?.revision ?? 0) + 1,
},
}));
}
}