--- product: "AG Charts" title: "HLC Series" description: "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." enterprise: true framework: react version: "14.3.0" related: - title: "Bar" url: "https://www.ag-grid.com/charts/react/bar-series/" - title: "Line" url: "https://www.ag-grid.com/charts/react/line-series/" - title: "Area" url: "https://www.ag-grid.com/charts/react/area-series/" - title: "Scatter" url: "https://www.ag-grid.com/charts/react/scatter-series/" - title: "Bubble" url: "https://www.ag-grid.com/charts/react/bubble-series/" - title: "Pie" url: "https://www.ag-grid.com/charts/react/pie-series/" - title: "Donut" url: "https://www.ag-grid.com/charts/react/donut-series/" - title: "Combination" url: "https://www.ag-grid.com/charts/react/combination-series/" - title: "Box Plot" url: "https://www.ag-grid.com/charts/react/box-plot-series/" - title: "Candlestick" url: "https://www.ag-grid.com/charts/react/candlestick-series/" - title: "OHLC" url: "https://www.ag-grid.com/charts/react/ohlc-series/" - title: "Heatmap" url: "https://www.ag-grid.com/charts/react/heatmap-series/" - title: "Histogram" url: "https://www.ag-grid.com/charts/react/histogram-series/" - title: "Nightingale" url: "https://www.ag-grid.com/charts/react/nightingale-series/" - title: "Radar Area" url: "https://www.ag-grid.com/charts/react/radar-area-series/" - title: "Radar Line" url: "https://www.ag-grid.com/charts/react/radar-line-series/" - title: "Radial Bar" url: "https://www.ag-grid.com/charts/react/radial-bar-series/" - title: "Radial Column" url: "https://www.ag-grid.com/charts/react/radial-column-series/" - title: "Range Area" url: "https://www.ag-grid.com/charts/react/range-area-series/" - title: "Range Bar" url: "https://www.ag-grid.com/charts/react/range-bar-series/" - title: "Waterfall" url: "https://www.ag-grid.com/charts/react/waterfall-series/" - title: "Sunburst" url: "https://www.ag-grid.com/charts/react/sunburst-series/" - title: "Treemap" url: "https://www.ag-grid.com/charts/react/treemap-series/" - title: "Sankey" url: "https://www.ag-grid.com/charts/react/sankey-series/" - title: "Chord" url: "https://www.ag-grid.com/charts/react/chord-series/" - title: "Funnel" url: "https://www.ag-grid.com/charts/react/funnel-series/" - title: "Cone Funnel" url: "https://www.ag-grid.com/charts/react/cone-funnel-series/" - title: "Pyramid" url: "https://www.ag-grid.com/charts/react/pyramid-series/" llms: "https://www.ag-grid.com/charts/llms.txt" --- # HLC Series 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 #### Simple HLC ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; 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, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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", }, ], }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Simple HLC](https://www.ag-grid.com/charts/reactFunctionalTs/hlc-series/examples/simple-hlc/) To create an HLC Series, use the `hlc` series type. ```js { 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 #### HLC Customisations ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgCharts } from "ag-charts-react"; 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, ]); const ChartExample = () => { const [options, setOptions] = useState({ 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", }, }, }, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: HLC Customisations](https://www.ag-grid.com/charts/reactFunctionalTs/hlc-series/examples/hlc-customisations/) 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. ```js { 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 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'`. ```js { series: [ { type: 'hlc', // ... marker: { enabled: true, itemStyler: ({ itemType }) => { return { size: itemType === 'close' ? 8 : 4 }; }, }, }, ], } ``` ## HLC Chart Examples See more HLC Chart examples in the [AG Charts Gallery](https://www.ag-grid.com/charts/gallery/#hlc). - [HLC Chart Example](https://www.ag-grid.com/charts/gallery/hlc/) ## API Reference #### HLC Series | Property | Type | Default | Description | | --- | --- | --- | --- | | 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 | 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. | | selection.enabled | boolean | | Set to `true` to enable the data-selection on this series. | | selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. | | selection.selectedItem | AgSelectionStyleOptions | | Styling options for selected items. | | selection.selectedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.selectedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.selectedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.selectedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.selectedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.selectedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | selection.unselectedItem | AgSelectionStyleOptions | | Styling options for unselected items. | | selection.unselectedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.unselectedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.unselectedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.unselectedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.unselectedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.unselectedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | selection.unselectedSeries | AgSelectionStyleOptions | | Styling options for series with no selections when there is at least one other selected series. | | selection.unselectedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | selection.unselectedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | selection.unselectedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | selection.unselectedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | selection.unselectedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | selection.unselectedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' | | 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. | | listeners.seriesNodeClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. | | listeners.seriesNodeDoubleClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. | | xKeyAxis | string | 'x' | The key of the x-axis to which this series is bound. | | yKeyAxis | string | '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`. | | marker.itemStyler | Styler | | Function used to return formatting for individual markers, based on the supplied information. | | marker.enabled | boolean | | Whether to show markers. | | marker.size | PixelSize | | The size in pixels of the markers. | | marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | marker.fillOpacity | Opacity | | The opacity of the fill colour. | | marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | marker.strokeWidth | PixelSize | | The width of the stroke in pixels. | | marker.strokeOpacity | Opacity | | The opacity of the stroke colour. | | marker.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | marker.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item | AgHlcSeriesItemThemeableOptions | | Configuration for the bands, edges and close line. | | item.high | AgHlcSeriesItemBandThemeableOptions | | Configuration for the band from close to high, and for the high edge. | | item.high.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | item.high.fillOpacity | Opacity | | The opacity of the fill colour. | | item.high.marker | AgHlcSeriesItemMarker | | Styling configuration for the markers on this line. | | item.high.marker.enabled | boolean | | Whether to show markers. | | item.high.marker.size | PixelSize | | The size in pixels of the markers. | | item.high.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | item.high.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | item.high.marker.fillOpacity | Opacity | | The opacity of the fill colour. | | item.high.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.high.marker.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.high.marker.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.high.marker.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.high.marker.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item.high.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.high.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.high.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.high.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.high.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item.low | AgHlcSeriesItemBandThemeableOptions | | Configuration for the band from low to close, and for the low edge. | | item.low.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | item.low.fillOpacity | Opacity | | The opacity of the fill colour. | | item.low.marker | AgHlcSeriesItemMarker | | Styling configuration for the markers on this line. | | item.low.marker.enabled | boolean | | Whether to show markers. | | item.low.marker.size | PixelSize | | The size in pixels of the markers. | | item.low.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | item.low.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | item.low.marker.fillOpacity | Opacity | | The opacity of the fill colour. | | item.low.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.low.marker.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.low.marker.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.low.marker.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.low.marker.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item.low.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.low.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.low.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.low.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.low.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item.close | AgHlcSeriesItemLineThemeableOptions | | Configuration for the close line. | | item.close.marker | AgHlcSeriesItemMarker | | Styling configuration for the markers on this line. | | item.close.marker.enabled | boolean | | Whether to show markers. | | item.close.marker.size | PixelSize | | The size in pixels of the markers. | | item.close.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | item.close.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | item.close.marker.fillOpacity | Opacity | | The opacity of the fill colour. | | item.close.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.close.marker.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.close.marker.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.close.marker.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.close.marker.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | item.close.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | item.close.strokeWidth | PixelSize | | The width of the stroke in pixels. | | item.close.strokeOpacity | Opacity | | The opacity of the stroke colour. | | item.close.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | item.close.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | interpolation | AgLineLinearType \| AgLineSmoothType \| AgLineStepType | | The type of interpolation used for the edges and close line. | | tooltip | AgSeriesTooltip | | Series-specific tooltip configuration. | | tooltip.enabled | boolean | | Whether to show tooltips when the series are hovered over. | | tooltip.showArrow | boolean | | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. | | tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. | | tooltip.position | AgTooltipPositionOptions | | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. | | tooltip.position.anchorTo | AgTooltipAnchorTo | | The element or point to position the tooltip relative to. | | tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] | | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. | | tooltip.position.xOffset | PixelSize | | The horizontal offset in pixels for the position of the tooltip. | | tooltip.position.yOffset | PixelSize | | The vertical offset in pixels for the position of the tooltip. | | tooltip.position.offset | PixelSize | | The distance in pixels between the tooltip and its anchor point, applied in the placement direction. Default: `12` (`0` when `anchorTo` is `'chart'`). | | tooltip.interaction | AgSeriesTooltipInteraction | | Configuration for tooltip interaction. | | tooltip.interaction.enabled (required) | boolean | | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text | | tooltip.renderer | Renderer | | Function used to create the content for tooltips. | | 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. | | highlight.highlightedSeries | AgHighlightStyleOptions | | Options for the highlighted series. | | highlight.highlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedSeries | AgHighlightStyleOptions | | Options for the un-highlighted series when there is an active highlight. | | highlight.unhighlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedSeries.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedSeries.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedSeries.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedSeries.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedSeries.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.bringToFront | boolean | true | Show this series in front when highlighted. | | highlight.enabled | boolean | | Set to `false` to disable highlighting. | | highlight.highlightedItem | AgHighlightStyleOptions | | Options for the highlighted item. | | highlight.highlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.highlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | highlight.unhighlightedItem | AgHighlightStyleOptions | | Options for the un-highlighted items when there is an active highlight. | | highlight.unhighlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | highlight.unhighlightedItem.fillOpacity | Opacity | | The opacity of the fill colour. | | showInMiniChart | boolean | | Whether to include the series in the Mini Chart. |