✨@nstudio/ncharts

Beautiful Native Charts for NativeScript

High-performance, fully customizable chart components.
Line, Bar, Pie, Scatter, Candlestick, Radar and more.

Get Started View Documentation

Native Performance

TypeScript First

iOS & Android

Every Chart Type You Need

From simple lines to complex candlesticks, render stunning charts with ease

Line Chart

Perfect for time series and trends

Smooth animations with 60fps performance

Touch gestures and interactions built-in

Fully customizable colors and styles

Real-time data updates supported

View documentation

Simple API, Powerful Results

Get started in minutes with our intuitive, type-safe API

📈Line Chart

const data: LineChartData = {
  dataSets: [{
    values: [{ y: 45 }, { y: 52 }, { y: 68 }, { y: 73 }],
    config: {
      colors: ['#3B82F6'],
      mode: 'CUBIC_BEZIER',
      drawFilled: true,
    },
  }],
};

📊Bar Chart

const data: BarChartData = {
  dataSets: [{
    values: [{ y: 25 }, { y: 32 }, { y: 28 }, { y: 41 }],
    config: {
      colors: ['#10B981', '#14B8A6', '#06B6D4', '#3B82F6'],
      drawValues: true,
    },
  }],
};

🥧Pie Chart

const data: PieChartData = {
  dataSets: [{
    values: [
      { value: 35, label: 'iOS' },
      { value: 45, label: 'Android' },
      { value: 20, label: 'Other' },
    ],
    config: { sliceSpace: 3 },
  }],
};

🔵Scatter Chart

const data: ScatterChartData = {
  dataSets: [{
    values: [
      { x: 1, y: 5 }, { x: 2, y: 8 },
      { x: 3, y: 4 }, { x: 4, y: 9 },
    ],
    config: { scatterShape: 'CIRCLE' },
  }],
};

🫧Bubble Chart

const data: BubbleChartData = {
  dataSets: [{
    values: [
      { x: 1, y: 5, size: 20 },
      { x: 3, y: 8, size: 35 },
      { x: 5, y: 3, size: 15 },
    ],
    config: { colors: ['#8B5CF6'] },
  }],
};

🕯️Candlestick

const data: CandleChartData = {
  dataSets: [{
    values: [{
      shadowH: 105, shadowL: 95,
      open: 98, close: 102,
    }],
    config: { increasingColor: '#10B981' },
  }],
};

🕸️Radar Chart

const data: RadarChartData = {
  labels: ['Speed', 'Power', 'Defense', 'Range'],
  dataSets: [{
    values: [{ value: 80 }, { value: 65 },
             { value: 90 }, { value: 70 }],
    config: { drawFilled: true },
  }],
};

📉Combined Chart

const data: CombinedChartData = {
  lineData: {
    dataSets: [{ values: [{ y: 30 }, { y: 45 }] }],
  },
  barData: {
    dataSets: [{ values: [{ y: 50 }, { y: 35 }] }],
  },
};

📏Horizontal Bar

// Use HorizontalBarChart component
const data: BarChartData = {
  dataSets: [{
    values: [{ y: 42 }, { y: 28 }, { y: 18 }],
    config: {
      colors: ['#F59E0B', '#EF4444', '#8B5CF6'],
    },
  }],
};

Chart Types

60fps

Animation Performance

100%

TypeScript Coverage

Ready to Get Started?

Install @nstudio/ncharts and start building beautiful charts today

npm install @nstudio/ncharts

Installation Guide Quick Start Tutorial