Installation

Data and grouped options

The data input carries the original values and structure for the selected chart. Import its public type, such as NativeLineData, and use satisfies to check your object. Cartesian data includes the axis definitions that interpret its coordinates. Visual settings such as axis titles, colours and tooltips belong to options.

Before you start

Start with an Angular 22 application configured for Angular Native and Expo.

Install with npm

Run this in the root of your app. npm installs the Core version required by this beta automatically.

npm install @neural-charts/native@0.1.0-beta.2

Configure the native host

Add this configuration to metro.config.js at the application root, beside package.json. If the file already exists, merge it with your current configuration. Wrap the app with GestureRoot as shown in the component below.

const { getDefaultConfig } = require('expo/metro-config');
const { withAngularNative } = require('@ng-native/metro/config.cjs');
module.exports = withAngularNative(getDefaultConfig(__dirname));

Create the chart screen

This complete component contains the imports, sample data, template and ChartScreen class. Use its chart-screen.ts file as the screen in your existing Angular Native app. If GestureRoot already wraps your app, keep that root and place only neu-c-chart inside the screen template.

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>;
}