An HLC Series shows high, low and close data as a line through the close values, with shaded bands reaching up to the high values and down to the low values.
Simple HLC Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgChartOptions,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HlcSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
ContextMenuModule,
CrosshairModule,
HlcSeriesModule,
LegendModule,
NumberAxisModule,
OrdinalTimeAxisModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
data: getData(),
title: {
text: "S&P 500 Index",
},
subtitle: {
text: "Daily High, Low and Close Prices",
},
footnote: {
text: "1 Aug 2023 - 1 Nov 2023",
},
series: [
{
type: "hlc",
xKey: "date",
xName: "Date",
highKey: "high",
lowKey: "low",
closeKey: "close",
},
],
};
}
}
To create an HLC Series, use the hlc series type.
{
series: [
{
type: 'hlc',
xKey: 'date',
highKey: 'high',
lowKey: 'low',
closeKey: 'close',
},
],
}In this configuration:
xKeysets the x value.highKeysets the high values.lowKeysets the low values.closeKeysets the close values.
The series is drawn as a band from the close to the high, a band from the low to the close, and a line through the close values. These are all part of the same series, so there is a single legend item, and a single tooltip for each data item.
Customisation Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgChartOptions,
AnimationModule,
ContextMenuModule,
CrosshairModule,
HlcSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
ContextMenuModule,
CrosshairModule,
HlcSeriesModule,
LegendModule,
NumberAxisModule,
OrdinalTimeAxisModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
data: getData(),
title: {
text: "Dow Jones Industrial Average",
},
subtitle: {
text: "HLC Customisations",
},
footnote: {
text: "1 Minute",
},
series: [
{
type: "hlc",
xKey: "date",
xName: "Time",
highKey: "high",
lowKey: "low",
closeKey: "close",
item: {
high: {
fillOpacity: 0.2,
lineDash: [4, 4],
},
low: {
fillOpacity: 0.2,
lineDash: [4, 4],
},
close: {
strokeWidth: 3,
marker: {
enabled: true,
shape: "diamond",
size: 8,
},
},
},
},
],
axes: {
x: {
type: "ordinal-time",
label: {
format: "%H:%M",
},
},
y: {
type: "number",
position: "right",
crosshair: {
label: {
format: ",.2f",
},
},
},
},
};
}
}
Series items are customised via the item configuration object.
The properties item.high, item.low and item.close control the display of the high band, the low band and the close line respectively.
item.highstyles the band from the close to the high, and the high edge.item.lowstyles the band from the low to the close, and the low edge.item.closestyles the close line.
{
series: [
{
type: 'hlc',
// ...
item: {
high: {
fillOpacity: 0.2,
lineDash: [4, 4],
},
low: {
fillOpacity: 0.2,
lineDash: [4, 4],
},
close: {
strokeWidth: 3,
marker: {
enabled: true,
shape: 'diamond',
size: 8,
},
},
},
},
],
} Markers Copy Link
Markers are not shown by default. Set marker.enabled to show markers on the high, low and close values, or enable them for a single value with item.high.marker, item.low.marker or item.close.marker, as in the example above.
Use marker.itemStyler to style individual markers. It is called once for each marker, with an itemType of 'high', 'low' or 'close'.
{
series: [
{
type: 'hlc',
// ...
marker: {
enabled: true,
itemStyler: ({ itemType }) => {
return { size: itemType === 'close' ? 8 : 4 };
},
},
},
],
} HLC Chart Examples Copy Link
See more HLC Chart examples in the AG Charts Gallery.
API Reference Copy Link
Properties available on the AgHlcSeriesOptions interface.
- type required
'hlc' - Configuration for the HLC Series.
- xKey required
DatumKey - The key to use to retrieve x-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.
- closeKey required
DatumKey - The key to use to retrieve close values from the data.
- id
stringdefault: 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.
- context
ContextDefault - Context object to use in callbacks.
- 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.
- focusIndex
number - Position of the series in the keyboard focus order within other series. Series with a lower value are focused first, instead of the declared order in the `series` array.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- xName
string - A human-readable description of the x-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.
- 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.
- yName
string - A human-readable description of the series. If supplied, this will be shown in the legend and the default tooltip.
- legendItemName
string - Human-readable description of the series. If supplied, matching items with the same value will be toggled together.
- marker
AgHlcMarker - Configuration for the markers used in the series. Markers are shared by the high, low and close values unless overridden in `item`.
- item
AgHlcSeriesItemThemeableOptions - Configuration for the bands, edges and close line.
- interpolation
AgInterpolationType - The type of interpolation used for the edges and close line.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- connectMissingData
boolean - Set to `true` to connect across missing data points.
- styler
Styler - Function used to return formatting for the entire series, 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.
Properties available on the AgHlcSeriesOptions interface.
- type required
'hlc' - Configuration for the HLC Series.
- xKey required
DatumKey - The key to use to retrieve x-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.
- closeKey required
DatumKey - The key to use to retrieve close values from the data.
- id
stringdefault: 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.
- context
ContextDefault - Context object to use in callbacks.
- 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.
- focusIndex
number - Position of the series in the keyboard focus order within other series. Series with a lower value are focused first, instead of the declared order in the `series` array.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- xName
string - A human-readable description of the x-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.
- 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.
- yName
string - A human-readable description of the series. If supplied, this will be shown in the legend and the default tooltip.
- legendItemName
string - Human-readable description of the series. If supplied, matching items with the same value will be toggled together.
- marker
AgHlcMarker - Configuration for the markers used in the series. Markers are shared by the high, low and close values unless overridden in `item`.
- item
AgHlcSeriesItemThemeableOptions - Configuration for the bands, edges and close line.
- interpolation
AgInterpolationType - The type of interpolation used for the edges and close line.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- connectMissingData
boolean - Set to `true` to connect across missing data points.
- styler
Styler - Function used to return formatting for the entire series, 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.