/*
 * LightningChartJS example that showcases creation of OHLC-chart.
 */
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    AxisTickStrategies,
    OHLCFigures,
    AxisScrollStrategies,
    emptyLine,
    Themes
} = lcjs

// Create a XY Chart.
const chart = lightningChart().ChartXY({
    // theme: Themes.darkGold
})
// Use DateTime TickStrategy for the X Axis, set current date as the origin.
chart
    .getDefaultAxisX()
    .setTickStrategy(
        AxisTickStrategies.DateTime,
        (tickStrategy) => tickStrategy.setDateOrigin(new Date())
    )

chart.setTitle('Open-High-Low-Close')
// Modify AutoCursor to only show TickMarker and GridLine over the X Axis.
chart.setAutoCursor(cursor => {
    cursor.disposeTickMarkerY()
    cursor.setGridStrokeYStyle(emptyLine)
})

// Add a OHLC Series with Bar as type of figures.
const series = chart.addOHLCSeries({ positiveFigure: OHLCFigures.Bar })
    .setName('Open-High-Low-Close')
// Create an array of XOHLC tuples (See API documentation) to use with the OHLC Series
//The XOHLC tuple consists of five different values; position on X Axis (in this case, the date of each entry), the open, high, low and close values.
const data = [
    [new Date(2019, 6, 29).getTime(), 208.46, 210.64, 208.44, 209.68],
    [new Date(2019, 6, 30).getTime(), 208.76, 210.16, 207.31, 208.78],
    [new Date(2019, 6, 31).getTime(), 216.42, 221.37, 211.3, 213.04],
    [new Date(2019, 7, 1).getTime(), 213.9, 218.03, 206.74, 208.43],
    [new Date(2019, 7, 2).getTime(), 205.53, 206.43, 201.63, 204.02],
    [new Date(2019, 7, 5).getTime(), 197.99, 198.65, 192.58, 193.34],
    [new Date(2019, 7, 6).getTime(), 196.31, 198.07, 194.04, 197],
    [new Date(2019, 7, 7).getTime(), 195.41, 199.56, 193.82, 199.04],
    [new Date(2019, 7, 8).getTime(), 200.2, 203.53, 199.39, 203.43],
    [new Date(2019, 7, 9).getTime(), 201.3, 202.76, 199.29, 200.99],
    [new Date(2019, 7, 12).getTime(), 199.62, 202.05, 199.15, 200.48],
    [new Date(2019, 7, 13).getTime(), 201.02, 212.14, 200.48, 208.97],
    [new Date(2019, 7, 14).getTime(), 203.16, 206.44, 202.59, 202.75],
    [new Date(2019, 7, 15).getTime(), 203.46, 205.14, 199.67, 201.74],
    [new Date(2019, 7, 16).getTime(), 204.28, 207.16, 203.84, 206.5],
    [new Date(2019, 7, 19).getTime(), 210.62, 212.73, 210.03, 210.35],
    [new Date(2019, 7, 20).getTime(), 210.88, 213.35, 210.32, 210.36],
    [new Date(2019, 7, 21).getTime(), 212.99, 213.65, 211.6, 212.64],
    [new Date(2019, 7, 22).getTime(), 213.19, 214.44, 210.75, 212.46],
    [new Date(2019, 7, 23).getTime(), 209.43, 212.05, 201, 202.64]
]
// Modify the bars for better visibility
series
    .setPositiveStyle((figure) => figure
        .setStrokeStyle((stroke) => stroke.setThickness(2))
    )
    .setNegativeStyle((figure) => figure
        .setStrokeStyle((stroke) => stroke.setThickness(2))
    )
    .setFigureWidth(10)
// Add the created data array to the OHLC series.
series.add(data)
// Add a single data entry to the array.
series.add([new Date(2019, 7, 26).getTime(), 205.86, 207.19, 205.06, 206.49])
// Change the title and behavior of the default Y Axis
chart.getDefaultAxisY()
    .setTitle('USD')
    .setInterval(195, 220)
    .setScrollStrategy(AxisScrollStrategies.expansion)
// Fit the X Axis around the given data. Passing false skips animating the fitting.
chart.getDefaultAxisX()
    .fit(false)

JavaScript OHLC Chart - Editor

ohlc trading xy date-time

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 ...
    )