Exit Editor

OHLC Chart

Also known as Price Chart, Bar Chart

This example shows basic implementation of OHLC chart using OHLC-series.

// OHLCSeries exists inside XY-charts.
const chart = lightningChart().ChartXY()
const ohlcSeries = chart.addOHLCSeries(
    // Specify type of figure used
    { positiveFigure: OHLCFigures.Bar }
)

OHLC-series accept data in the form of interface 'XOHLC':

const xohlc = [
    // X-position
    0,
    // Opening Y-value
    100,
    // Highest Y-value
    200,
    // Lowest Y-value
    50,
    // Closing Y-value
    75
]
// Add new segment to series.
ohlcSeries.add(xohlc)

add() can be called with a single XOHLC-object or with an array of them.

Anatomy of a Bar figure

A bar figure is formed from three line segments, which can be styled with a single LineStyle object.

Figure styling

OHLC Series provides an ability to specify styles for both positive and negative candlesticks individually.

// Width of both positive and negative candlesticks
const figureWidth = 5.0
// Green color filling
const fillStylePositive = new SolidFill()
    .setColor( ColorRGBA( 0, 128, 0 ) )
// Lime color filling
const fillStyleHighlightPositive = new SolidFill()
    .setColor( ColorRGBA (0, 255, 0) )
// Black color stroke
const bodyStrokeStyle = new SolidLine()
    .setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 0, 0 ) ) )
    .setThickness( 1.0 )
// Green color stroke
const strokeStylePositive = new SolidLine()
    .setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 128, 0 ) ) )
// Lime color stroke
const strokeStylePositiveHighlight = new SolidLine()
    .setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 240, 0 ) ) )

ohlcSeries
    // Setting width of figures
    .setFigureWidth ( figureWidth )
    // Styling positive candlestick
    .setPositiveStyle ( ( candlestick ) => candlestick
        // Candlestick body fill style
        .setBodyFillStyle( fillStylePositive )
        // Candlestick body fill style when highlighted
        .setBodyFillStyleHighlight( fillStyleHighlightPositive )
        // Candlestick body stroke style
        .setBodyStrokeStyle( bodyStrokeStyle )
        // Candlestick stroke style
        .setStrokeStyle( strokeStylePositive )
        // Candlestick stroke style when highlighted
        .setStrokeStyleHighlight( strokeStylePositiveHighlight )
    )
    // Styling negative candlestick
    .setNegativeStyle( ( candlestick ) => candlestick
        // etc ...
    )

© Arction Ltd 2009-2020. All rights reserved.