JavaScript ChartsHLC Series

Version 14.3.0

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

main.ts

import {
  AgChartOptions,
  AgCharts,
  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,
]);

const options: AgChartOptions = {
  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",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

To create an HLC Series, use the hlc series type.

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

In this configuration:

xKey sets the x value.
highKey sets the high values.
lowKey sets the low values.
closeKey sets 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

main.ts

import {
  AgChartOptions,
  AgCharts,
  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,
]);

const options: AgChartOptions = {
  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",
        },
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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.high styles the band from the close to the high, and the high edge.
item.low styles the band from the low to the close, and the low edge.
item.close styles 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.

HLC Chart Example

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 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.
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 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: 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.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges