AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsOHLC Series

Version 14.2.0
Enterprise

An OHLC Series shows open and close data with horizontal tick lines, and high and low ranges with a vertical line.

Simple OHLC Copy Link

To create an OHLC Series, use the ohlc series type.

{
    series: [
        {
            type: 'ohlc',
            xKey: 'date',
            lowKey: 'low',
            openKey: 'open',
            closeKey: 'close',
            highKey: 'high',
        },
    ],
}

In this configuration:

  • xKey sets the ohlc's x value.
  • lowKey maps to the low/min value.
  • openKey maps to the open value.
  • closeKey maps to the close value.
  • highKey maps to the high/max value.

Customisation Copy Link

Series items are customised via the item configuration object.

Data items with a closing value higher than the opening value are considered as up, and those with a closing value lower than the opening value are down.

The properties item.up and item.down control the display of rising and falling series items.

{
    series: [
        {
            type: 'ohlc',
            // ...
            item: {
                up: {
                    stroke: '#45ba45',
                    strokeWidth: 2,
                },
                down: {
                    stroke: '#ba4545',
                    strokeWidth: 2,
                },
            },
        },
    ],
}

OHLC Chart Examples Copy Link

See more OHLC Chart examples in the AG Charts Gallery.

OHLC Chart Example

API Reference Copy Link

Properties available on the AgOhlcSeriesOptions interface.

type required 'ohlc'
Configuration for the OHLC Series.
xKey required DatumKey
xKey as specified on series options.
openKey required DatumKey
The key to use to retrieve open values from the data.
closeKey required DatumKey
The key to use to retrieve close values from the data.
highKey required DatumKey
The key to use to retrieve high values from the data.
lowKey required DatumKey
The key to use to retrieve low values from the data.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
itemStyler Styler
Function used to return formatting for individual items, based on the given parameters.
highlight AgMultiSeriesHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
showInMiniChart boolean
Whether to include the series in the Mini Chart.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
context ContextDefault
Context object to use in callbacks.
selection AgSelectionOptions
Configuration for data selection.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
listeners AgSeriesListeners
A map of event names to event listeners.
item AgOhlcSeriesItem
Configuration used for the series items.
id string default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
data DatumDefault[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean
Whether to display the series.
showInLegend boolean
Whether to include the series in the legend.
xKeyAxis string default: 'x'
The key of the x-axis to which this series is bound.
yKeyAxis string default: 'y'
The key of the y-axis to which this series is bound.
xName string
xName as specified on series options.
yName string
yName as specified on series options.
openName string
A human-readable description of open values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
closeName string
A human-readable description of close values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
highName string
A human-readable description of high values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
lowName string
A human-readable description of low values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.