Ripl

Appearance

Stock Chart ​

The Stock Chart draws OHLC (open, high, low, close) data as candlesticks, each one carrying a period's full range and direction in a single mark, with an optional labeled volume sub-chart beneath. It fits price history, and any other data where a period's extremes matter as much as its close. open, high, low, close and volume bind the accessors, showVolume toggles the sub-chart, and upColor/downColor separate bullish from bearish candles. Dual-axis crosshair tracking, grid lines, tooltips, annotations and pan-zoom navigation are built in, and candles and volume bars animate on data changes. Canvas is the default target; pass an SVG or terminal context to draw the same chart elsewhere.

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

Data Format ​

Each item is one candle: a key for the x axis plus its open, high, low and close. volume is optional and enables the volume panel beneath the candles:

ts
const data = [
    {
        date: '2024-01-02',
        open: 184.2,
        high: 188.4,
        low: 183.9,
        close: 187.6,
        volume: 12_400_000,
    },
    {
        date: '2024-01-03',
        open: 187.6,
        high: 189.1,
        low: 184.0,
        close: 184.5,
        volume: 9_800_000,
    },
];

A candle closing at or above its open is drawn with upColor, below its open with downColor.

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createStockChart('#container', {
    data,
    key: 'date',
    open: 'open',
    high: 'high',
    low: 'low',
    close: 'close',
    volume: 'volume',
    // Draws the volume histogram beneath the candles.
    showVolume: true,
    upColor: '#6dd5b1',
    downColor: '#f4a0b9',
    format: 'number',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a candlestick is clicked.
chart.on('candleclick', event => console.log(event.data)); // event.data: StockChartCandleEvent
// Emitted when the pointer enters a candlestick.
chart.on('candleenter', event => console.log(event.data)); // event.data: StockChartCandleEvent
// Emitted when the pointer leaves a candlestick.
chart.on('candleleave', event => console.log(event.data)); // event.data: StockChartCandleEvent