JavaScript OHLC Chart - Editor
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 ...
)