Candlestick

Basic usage

Pass OHLC data to Datum.candlestick(). Each datum represents one candlestick.

import {
    Datum,
    Color
} from '@psdpainter/datum-js';

const values = [
    { x: 'Mon', open: 142, high: 151, low: 139, close: 148 },
    { x: 'Tue', open: 148, high: 153, low: 144, close: 146 },
    { x: 'Wed', open: 146, high: 156, low: 145, close: 154 },
    { x: 'Thu', open: 154, high: 158, low: 149, close: 151 },
    { x: 'Fri', open: 151, high: 160, low: 150, close: 158 },
    { x: 'Mon', open: 158, high: 163, low: 154, close: 156 },
    { x: 'Tue', open: 156, high: 166, low: 155, close: 164 }
];

Datum.chart({
    target: '#candlestick-example',
    width: '100%',
    height: 320,
    datum: [
        Datum.candlestick(values, {
            x: 'x',
            open: 'open',
            high: 'high',
            low: 'low',
            close: 'close',
            upColor: Color.Green,
            downColor: Color.Red,
            strokeWidth: 1,
            rx: 1
        })
    ]
});

Syntax

Datum.candlestick(data, {
    x,
    open,
    high,
    low,
    close,
    upColor,
    downColor,
    strokeWidth,
    rx,
    bodyRatio
});

Data

Each object should provide values for the X position, opening price, highest price, lowest price and closing price.

const values = [{
    x: 'Mon',
    open: 142,
    high: 151,
    low: 139,
    close: 148
}, {
    x: 'Tue',
    open: 148,
    high: 153,
    low: 144,
    close: 146
}];

Datum.candlestick(values);

Data keys

By default, Datum expects properties namedx, open, high,low and close.

You can map differently named properties to the expected candlestick dimensions.

const prices = [{
    date: 'Mon',
    opening: 142,
    maximum: 151,
    minimum: 139,
    closing: 148
}];

Datum.candlestick(prices, {
    x: 'date',
    open: 'opening',
    high: 'maximum',
    low: 'minimum',
    close: 'closing'
});

Up and down colors

Candlesticks use separate colors depending on whether the closing value is above or below the opening value.

Datum.candlestick(values, {
    upColor: Color.Green,
    downColor: Color.Red
});

An up candle represents an observation whereclose >= open. A down candle represents an observation where close < open.

Stroke width

Use strokeWidth to control the thickness of the candlestick wick and body outline.

Datum.candlestick(values, {
    strokeWidth: 2
});

Rounded corners

Use rx to control the corner radius of the candlestick body.

Datum.candlestick(values, {
    rx: 2
});

Body width

Use bodyRatio to control how much of the available category width is occupied by the candle body.

Datum.candlestick(values, {
    bodyRatio: 0.6
});

Options

{
    x: 'x',
    open: 'open',
    high: 'high',
    low: 'low',
    close: 'close',

    upColor: Color.Green,
    downColor: Color.Red,

    strokeWidth: 1,
    rx: 1,
    bodyRatio: 0.6
}

Understanding a candlestick

The body spans the opening and closing values. The wick extends from the low value to the high value.

Together, these four values show both the range of the observation and the direction of movement between its opening and closing values.