JavaScript OHLC Chart - Editor

Also known as Price Chart, Bar Chart

Please note that using LightningChart JS for Trading use cases requires a special license agreement.
For more information, please contact us.

OHLC stands for open, high, low, and close. OHLC charts are important because they show the value of a stock over time. The opening price is the price at which a stock was first traded for the day, and it will usually be either higher or lower than the previous day's closing price, depending on how well the stock market has done. The highest price is simply the maximum amount that a share can sell for in order to buy. The lowest point is called the low, and it's simply what it sounds like: the lowest point of trading for that given day.

An OHLC chart can be useful for analyzing how a stock's value fluctuates over time. When looking at this chart, it is important to note that the range for each bar will typically depend on the time period being analyzed (e.g., daily or weekly).

The vertical line on an OHLC chart represents the change in price movement from opening to closing and will have four points: the high point at which the highest price is reached during that day's trading session, the low point at which the lowest price is reached during that day's trading session, and finally, the opening and closing prices for that day.

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.

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

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 stroke style
            .setBodyStrokeStyle(bodyStrokeStyle)
            // Candlestick stroke style
            .setStrokeStyle(strokeStylePositive),
    )
    // Styling negative candlestick
    .setNegativeStyle(
        (candlestick) => candlestick,
        // etc ...
    )