New to Kendo UI for Angular? Start a free 30-day trial

OHLC and Candlestick Charts

Updated on Jan 20, 2026

The OHLC (Open-High-Low-Close) and Candlestick Charts are specialized financial visualizations that display price movements over time. Both chart types present four critical price points: opening price, highest price, lowest price, and closing price for each time period.

Change Theme

Theme

Loading ...

Visual Representation

Candlestick Chart—Uses filled or hollow rectangles (bodies) with extending lines (wicks or shadows) to show price ranges. The body color indicates whether the closing price was higher (bullish - typically green) or lower (bearish - typically red) than the opening price.

OHLC Chart—Uses vertical lines with horizontal ticks to represent the same data. The left tick shows the opening price, the right tick shows the closing price, and the vertical line spans from the low to the high price.

Both chart types are essential for technical analysis in financial markets, including stock market analysis, cryptocurrency trading, forex market monitoring, and commodities price tracking.

Binding to Data

You can bind both OHLC and Candlestick chart series to an array through the data property using object models with OHLC (Open, High, Low, Close) price data. The data structure is identical for both chart types.

Binding to objects—Use an array of objects with properties for open, high, low, and close values.

public data: Array<{ date: Date; open: number; high: number; low: number; close: number }> = [
    { date: new Date(2024, 0, 2), open: 142.50, high: 145.20, low: 141.80, close: 144.30 },
    { date: new Date(2024, 0, 3), open: 144.30, high: 146.50, low: 143.20, close: 143.80 },
    { date: new Date(2024, 0, 4), open: 143.80, high: 145.90, low: 142.50, close: 145.60 }
];

When binding to objects, specify which properties contain the OHLC data through the following field mappings:

Property	Data type	Required	Description
`openField`	`string`	Yes	The property name that contains the opening price with `number` values.
`highField`	`string`	Yes	The property name that contains the highest price with `number` values.
`lowField`	`string`	Yes	The property name that contains the lowest price with `number` values.
`closeField`	`string`	Yes	The property name that contains the closing price with `number` values.
`categoryField`	`string`	No	The property name that contains the category with `date` or `string` values.

To create a Candlestick chart, set the series type to candlestick. To create an OHLC chart, set the series type to ohlc. Both chart types use the same field mappings.

The following example demonstrates both chart types side-by-side, bound to the same data using identical field mappings.

Change Theme

Theme

Loading ...

Customizing the Appearance

You can customize the visual appearance of both OHLC and Candlestick charts through several properties that control colors, spacing, and line styles:

color—Specifies the color for bullish candlesticks (when close is higher than open). Defaults to green indicating positive price movement.
downColor—Specifies the color for bearish candlesticks (when close is lower than open). Defaults to red indicating negative price movement.
line—Controls the appearance of the candlestick borders and wicks through the SeriesLine configuration, including width and style properties.
gap—Sets the distance between categories as a percentage of the bar width. Larger values create wider gaps between candlesticks.
spacing—Specifies the space between series items in the same category as a percentage of the bar width.
border—Configures the border appearance with color and width properties.

The following example demonstrates how to customize the appearance of Candlestick and OHLC charts using an interactive configurator.

Change Theme

Theme

Loading ...

OHLC and Candlestick Charts

Visual Representation

Binding to Data

Customizing the Appearance

Support and Learning Resources

Additional Resources