Quickstart

Render a chart by passing an array of Candle objects. The chart fills its parent by default, so size it with style.

React Native

import { View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { VroomChart, type Candle } from 'react-native-vroom-chart';

const candles: Candle[] = [
  { timeMs: 1700000000000, open: 100, high: 105, low: 98, close: 103, volume: 1200 },
  { timeMs: 1700003600000, open: 103, high: 108, low: 102, close: 107, volume: 1500 },
  // …more bars
];

export function Chart() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <VroomChart candles={candles} style={{ flex: 1 }} />
      </View>
    </GestureHandlerRootView>
  );
}

style takes a React Native ViewStyle.

Web

import { VroomChart, type Candle } from '@vroomchart/react';

const candles: Candle[] = [
  { timeMs: 1700000000000, open: 100, high: 105, low: 98, close: 103, volume: 1200 },
  { timeMs: 1700003600000, open: 103, high: 108, low: 102, close: 107, volume: 1500 },
  // …more bars
];

export function Chart() {
  return <VroomChart candles={candles} style={{ width: '100%', height: 400 }} />;
}

No wrapper or provider is needed. style is a plain DOM CSSProperties; give the chart a height (it fills its parent, which must be sized).

That's the whole required surface: candles. Everything else is optional.

Interacting

React Native

• Pan — drag horizontally to scroll through time (and vertically to move the price window).
• Pinch — zoom in/out around your fingers.
• Axis drag — drag the price (right) or time (bottom) axis to rescale just that axis.
• Long-press — show a crosshair that snaps to the nearest candle.

Web

• Pan — drag to scroll through time and move the price window.
• Zoom — scroll the wheel (or pinch on a trackpad) to zoom the time window around the cursor; ctrl/⌘+wheel zooms both axes.
• Pan with the wheel — horizontal scroll, or shift+wheel, pans through time.
• Axis drag — drag the price (right) or time (bottom) axis to rescale just that axis.
• Hover — move the mouse over the chart to show a crosshair that follows the cursor (touch devices long-press instead).

What's next

• Control the initial window with visibleRange, or omit it to show a sensible recent window.
• Theme the colors.
• Add indicators — RSI, MACD, moving averages, VWAP.
• React to crosshair and viewport events.

See the API reference for every prop and type, and Platform differences for the per-platform props.