Native iOS/Android charting for NativeScript using DGCharts (iOS) and MPAndroidChart (Android).

Features

• Native Performance — Platform-native charting with smooth animations
• Rich Chart Types — Line, Bar, Pie, Scatter, Bubble, CandleStick, Radar, Combined
• Highly Customizable — Colors, legends, axes, animations, markers
• Interactive — Pan, zoom, touch highlighting, gestures
• Multi-Framework — Angular, React, Solid, Svelte, Vue

Installation

npm install @nstudio/ncharts
# or
yarn add @nstudio/ncharts
# or
pnpm add @nstudio/ncharts
# or
bun add @nstudio/ncharts

Platform Requirements

• iOS: 12.0+ (DGCharts 5.1.0)
• Android: API 21+ (MPAndroidChart 3.1.0)

Framework Usage

Angular

import { registerNchartsElements, LineChart } from '@nstudio/ncharts/angular';
registerNchartsElements();

@Component({
  template: `<LineChart [data]="chartData" />`,
  imports: [LineChart]
})
export class MyComponent {
  chartData: LineChartData = { dataSets: [{ label: 'Sales', values: [{ x: 0, y: 45 }] }] };
}

React

import { LineChart } from '@nstudio/ncharts/react';

export function MyComponent() {
  const data = { dataSets: [{ label: 'Sales', values: [{ x: 0, y: 45 }] }] };
  return <LineChart data={data} />;
}

Solid

import { LineChart } from '@nstudio/ncharts/solid';

export function MyComponent() {
  const data = { dataSets: [{ label: 'Sales', values: [{ x: 0, y: 45 }] }] };
  return <LineChart data={data} />;
}

Svelte

<script>
  import { LineChart } from '@nstudio/ncharts/svelte';
  const data = { dataSets: [{ label: 'Sales', values: [{ x: 0, y: 45 }] }] };
</script>

<LineChart {data} />

Vue

<script setup>
import { LineChart } from '@nstudio/ncharts/vue';
const data = { dataSets: [{ label: 'Sales', values: [{ x: 0, y: 45 }] }] };
</script>

<template>
  <LineChart :data="data" />
</template>

Chart Types

| Chart | Element | Description | |-------|---------|-------------| | Line | <LineChart> | Line charts with bezier curves | | Bar | <BarChart> | Vertical bar charts | | Horizontal Bar | <HorizontalBarChart> | Horizontal bar charts | | Pie | <PieChart> | Pie/donut charts | | Scatter | <ScatterChart> | Scatter plots | | Bubble | <BubbleChart> | Bubble charts | | CandleStick | <CandleStickChart> | Financial OHLC charts | | Radar | <RadarChart> | Spider/radar charts | | Combined | <CombinedChart> | Multiple types combined |

Configuration

<LineChart
  [data]="chartData"
  [legend]="{ enabled: true, horizontalAlignment: 'CENTER' }"
  [xAxis]="{ enabled: true, position: 'BOTTOM' }"
  [yAxis]="{ left: { enabled: true }, right: { enabled: false } }"
  [animation]="{ duration: 1000, easingFunction: 'EaseInOutQuad' }"
  dragEnabled="true"
  scaleEnabled="true"
  pinchZoom="true"
/>

Credits

• iOS: DGCharts by Daniel Gindi
• Android: MPAndroidChart by Philipp Jahoda

License

MIT