Ripl

Appearance

Stock Chart ​

The Stock Chart renders OHLC (Open, High, Low, Close) candlestick data with optional volume bars beneath. Bullish and bearish candles are colored distinctly (upColor / downColor), and the chart includes crosshair tracking, grid lines, and tooltips. Candles and volume bars animate smoothly on data changes, and the volume overlay can be toggled on or off.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createStockChart,
} from '@ripl/charts';

const chart = createStockChart('#container', {
    data: [...],
    key: 'date',
    open: 'open',
    high: 'high',
    low: 'low',
    close: 'close',
    volume: 'volume',
});

// Update data
chart.update({ data: newData });

Options ​

  • data — The data array
  • key — Key accessor for each data point (e.g. date)
  • open / high / low / close — Price accessors
  • volume — Volume accessor (optional)
  • showVolume — Show volume bars below the chart (default true)
  • grid — boolean | ChartGridOptions — Show/configure grid lines
  • crosshair — boolean | ChartCrosshairOptions — Show/configure crosshair
  • tooltip — boolean | ChartTooltipOptions — Show/configure tooltips
  • axis — boolean | ChartAxisOptions — Configure x/y axes
  • upColor — Color for bullish candles (default #6dd5b1)
  • downColor — Color for bearish candles (default #f4a0b9)
  • padding — Chart padding