--- title: "Range Bar Series" enterprise: true framework: javascript version: "14.1.0" --- # Range Bar Series A Range Bar Series uses vertical or horizontal bars to show the range between high and low values in data. This series type is commonly used to assess data stability or variability. ## Simple Range Bar #### Simple Range Bar ```ts import { AgChartOptions, AgCharts, AnimationModule, CategoryAxisModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CategoryAxisModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Salary Ranges By Department", }, subtitle: { text: "Low and High Salary Brackets Across Various Departments (in thousands)", }, series: [ { type: "range-bar", xKey: "department", yLowKey: "low", yHighKey: "high", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Simple Range Bar](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/simple-range-bar) The Range Bar Series is created using the `range-bar` series type. ```js { series: [ { type: 'range-bar', xKey: 'department', yLowKey: 'low', yHighKey: 'high', }, ], } ``` The `yLowKey` and `yHighKey` are used to retrieve the range of values for the y-axis. ## Multiple Range Bar Series Multiple Range Bar Series can be combined into a single chart. #### Multiple Range Bar Series ```ts import { AgChartOptions, AgCharts, AnimationModule, CategoryAxisModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CategoryAxisModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: `Digital Subscriptions`, }, subtitle: { text: `In Thousands`, }, series: [ { type: "range-bar", xKey: "date", yLowKey: "start", yHighKey: "gain", xName: "Month", yLowName: "Start", yHighName: "End", yName: "Gained", }, { type: "range-bar", xKey: "date", yLowKey: "loss", yHighKey: "gain", xName: "Month", yLowName: "End", yHighName: "Start", yName: "Lost", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Multiple Range Bar Series](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/multiple-range-bars) ```js { series: [ { type: 'range-bar', xKey: 'date', yLowKey: 'start', yHighKey: 'gain', xName: 'Month', yLowName: 'Start', yHighName: 'End', yName: 'Gained', }, { type: 'range-bar', xKey: 'date', yLowKey: 'loss', yHighKey: 'gain', xName: 'Month', yLowName: 'End', yHighName: 'Start', yName: 'Lost', }, ], } ``` In this configuration: - `yName` is used to control the text displayed in the legend. - `yLowName`, `yHighName` and `xName` are used to control the text displayed in the tooltip. ## Missing Data The series handles missing or invalid data based on the presence or validity of `xKey`, `yLowKey` and `yHighKey` values in the data object. #### Range Bar Missing Data ```ts import { AgCartesianChartOptions, AgCharts, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, UnitTimeAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, UnitTimeAxisModule, ContextMenuModule, ]); const options: AgCartesianChartOptions = { data: getData(), title: { text: "Range Bar Missing Data", }, series: [ { type: "range-bar", xKey: "date", xName: "Date", yLowKey: "low", yHighKey: "high", }, ], axes: { x: { type: "unit-time", crosshair: { enabled: false, }, }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function missingYValues() { const data = getData(); data[2].high = undefined; data[5].low = undefined; options.data = data; chart.update(options); } function missingXValue() { const data = getData(); data[6].date = undefined; options.data = data; chart.update(options); } function reset() { options.data = getData(); chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).missingYValues = missingYValues; (window).missingXValue = missingXValue; (window).reset = reset; } ``` [Live example: Range Bar Missing Data](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/range-bar-missing-data) When the axes types are continuous (`'number'`, `'time'` or `'log'`), the `yLowKey`, `yHighKey` and `xKey` values in the data object are considered invalid if they are: - `+/-Infinity` - `null` - `undefined` - `NaN` > **Note** > > Data entries with invalid `yLowKey`, `yHighKey` and `xKey` values will result in gaps in the series. ## Customisation ### Labels Series labels can be enabled using the `label` options. #### Range Bar Label ```ts import { AgChartOptions, AgCharts, AnimationModule, CategoryAxisModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CategoryAxisModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Salary Ranges By Department", }, subtitle: { text: "Low and High Salary Brackets Across Various Departments (in thousands)", }, series: [ { type: "range-bar", xKey: "department", yLowKey: "low", yHighKey: "high", label: { padding: 10, formatter: ({ itemType, value }) => { return `£${value.toFixed(0)}K ${itemType === "low" ? "↓" : "↑"}`; }, }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Range Bar Label](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/range-bar-labels) ```js { series: [ { // ... label: { padding: 10, formatter: ({ itemType, value }) => { return `£${value.toFixed(0)}K ${itemType === 'low' ? '↓' : '↑'}`; }, }, }, ], } ``` In this configuration: - The `yHighKey` and `yLowKey` values for each data point are presented as labels via the `label` options. - The `label.formatter` function uses the `itemType` from the params object to distinguish whether the label is a `low` or `high` value. ### Corner Radius The corner radius can be customised with the `cornerRadius` property. #### Customising Corner Radius ```ts import { AgChartOptions, AgCharts, AnimationModule, CategoryAxisModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CategoryAxisModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Salary Ranges By Department", }, subtitle: { text: "Low and High Salary Brackets Across Various Departments (in thousands)", }, series: [ { type: "range-bar", xKey: "department", yLowKey: "low", yHighKey: "high", cornerRadius: 10, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Customising Corner Radius](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/customising-corner-radius) ```js { series: [ { // ... cornerRadius: 10, }, ], } ``` ## Horizontal Range Bar #### Horizontal Range Bar ```ts import { AgChartOptions, AgCharts, AnimationModule, CategoryAxisModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, NumberAxisModule, RangeBarSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CategoryAxisModule, CrosshairModule, LegendModule, NumberAxisModule, RangeBarSeriesModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Salary Ranges By Department", }, subtitle: { text: "Low and High Salary Brackets Across Various Departments (in thousands)", }, series: [ { type: "range-bar", direction: "horizontal", xKey: "department", yLowKey: "low", yHighKey: "high", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Horizontal Range Bar](https://www.ag-grid.com/charts/typescript/range-bar-series/examples/horizontal-range-bar) To create a Horizontal Range Bar Series, set `direction: 'horizontal'`. ```js { series: [ { type: 'range-bar', direction: 'horizontal', xKey: 'department', yLowKey: 'low', yHighKey: 'high', }, ], } ``` When the `direction` is `'horizontal'` the `xKey` will determine categories on the y-axis, while the `yLowKey` and `yHighKey` will be used to provide numerical values along the x-axis. ## API Reference #### Range Bar Series | Property | Type | Default | Description | | --- | --- | --- | --- | | type (required) | 'range-bar' | | Configuration for the Range Bar Series. | | xKey (required) | DatumKey | | The key to use to retrieve x-values from the data. | | yLowKey (required) | DatumKey | | The key to use to retrieve y-low-values from the data. | | yHighKey (required) | DatumKey | | The key to use to retrieve y-high-values from the data. | | 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. | | yName | string | | A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | yLowName | string | | A human-readable description of the y-low-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | yHighName | string | | A human-readable description of the y-high-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. | | legendItemName | string | | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. | | direction | 'horizontal' \| 'vertical' | | Bar rendering direction. __Note:__ This option affects the layout direction of X and Y data values. | | 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. | | label | AgRangeBarSeriesLabelOptions | | Configuration for the labels shown on top of data points. | | label.placement | AgRangeBarSeriesLabelPlacement \| AgRangeBarSeriesLabelPlacement[] | | Where to render series labels relative to the bars. Either a single placement or an ordered fallback list tried in turn until one fits. | | label.spacing | PixelSize | | Spacing in pixels between the label and the edge of the bar. | | label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. | | label.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | label.format | string | | Format string used when rendering labels. | | label.itemStyler | Styler | | Function used to style individual datum labels. | | label.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.fontSize | FontSize | | The size of the font in pixels for text elements. | | label.fontFamily | FontFamily | | The font family for text elements. | | label.fontStyle | FontStyle | | The style to use for text elements. | | label.fontWeight | FontWeight | | The font weight to use for text elements. | | label.border | BorderOptions | | Stroke options for the box border. | | label.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | label.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | label.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. | | label.fillOpacity | Opacity | | The opacity of the fill colour. | | label.collision | AgChartLabelCollisionOptions | | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. | | label.collision.threshold | PixelSize | | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. | | label.collision.alwaysShow | boolean | | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. | | label.maxWidth | PixelSize | | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.maxHeight | PixelSize | | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. | | label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. | | label.truncate | boolean | | Whether to truncate the label with an ellipsis when it does not fit within its bounds. | | label.insideStyle | AgChartLabelPlacementStyleOptions | | Style overrides applied only when the label's resolved placement is inside the shape. | | label.insideStyle.cornerRadius | PixelSize | | Rounded corners applied to the label box for this placement. | | label.insideStyle.padding | PixelSize \| PaddingOptions | | Distance between the label text and the box edge for this placement. | | label.insideStyle.border | StrokeOptions | | Border stroke applied to the label box for this placement. | | label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.insideStyle.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.insideStyle.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.insideStyle.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. | | label.insideStyle.fillOpacity | Opacity | | The opacity of the fill colour. | | label.outsideStyle | AgChartLabelPlacementStyleOptions | | Style overrides applied only when the label's resolved placement is outside the shape. | | label.outsideStyle.cornerRadius | PixelSize | | Rounded corners applied to the label box for this placement. | | label.outsideStyle.padding | PixelSize \| PaddingOptions | | Distance between the label text and the box edge for this placement. | | label.outsideStyle.border | StrokeOptions | | Border stroke applied to the label box for this placement. | | label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.outsideStyle.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.outsideStyle.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.outsideStyle.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. | | label.outsideStyle.fillOpacity | Opacity | | The opacity of the fill colour. | | shadow | AgDropShadowOptions | | Configuration for the shadow used behind the series items. | | shadow.enabled | boolean | | Whether the shadow is visible. | | shadow.color | CssColor | | The colour of the shadow. | | shadow.xOffset | PixelSize | | The horizontal offset in pixels for the shadow. | | shadow.yOffset | PixelSize | | The vertical offset in pixels for the shadow. | | shadow.blur | PixelSize | | The radius of the shadow's blur, given in pixels. | | styler | Styler | | Function used to return formatting for entire series, based on the given parameters. | | itemStyler | Styler | | Function used to return formatting for individual RangeBar series item cells, based on the given parameters. | | highlight | AgMultiSeriesHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | highlight.highlightedSeries | AgRangeBarHighlightStyleOptions | | Options for the highlighted series. | | highlight.highlightedSeries.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedSeries.cornerRadius | PixelSize | | Apply rounded corners to each bar. | | 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.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.unhighlightedSeries | AgRangeBarHighlightStyleOptions | | 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.cornerRadius | PixelSize | | Apply rounded corners to each bar. | | 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.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.bringToFront | boolean | true | Show this series in front when highlighted. | | highlight.enabled | boolean | | Set to `false` to disable highlighting. | | highlight.highlightedItem | AgRangeBarHighlightStyleOptions | | Options for the highlighted item. | | highlight.highlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedItem.cornerRadius | PixelSize | | Apply rounded corners to each bar. | | 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.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.unhighlightedItem | AgRangeBarHighlightStyleOptions | | 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.cornerRadius | PixelSize | | Apply rounded corners to each bar. | | 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. | | 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. | | grouped | boolean | | Whether to group together (adjacently) separate bars. | | segmentation | AgSeriesSegmentation | | Configuration for styling series as separate segments. | | segmentation.key (required) | 'x' \| 'y' | | The axis key used for segmentation. | | segmentation.segments (required) | AgSeriesShapeSegmentOptions[] | | Configuration for each segment. | | segmentation.segments.start | AxisValue | | The axis value at which the styles should start. This is the start of the axis domain by default. | | segmentation.segments.stop | AxisValue | | The axis value at which the styles should stop. This is the end of the axis domain by default. | | segmentation.segments.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | segmentation.segments.strokeWidth | PixelSize | | The width of the stroke in pixels. | | segmentation.segments.strokeOpacity | Opacity | | The opacity of the stroke colour. | | segmentation.segments.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | segmentation.segments.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | segmentation.segments.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. | | segmentation.segments.fillOpacity | Opacity | | The opacity of the fill colour. | | segmentation.enabled | boolean | | Whether segmentation is enabled. | | width | PixelSize | | Fixed width of each bar in the series. | | widthRatio | Ratio | | Ratio of the bandwidth (or specified width) to use for the width for each bar in the series. | | 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. | | 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. | | cornerRadius | PixelSize | | Apply rounded corners to each bar. | | 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. | | fillOpacity | Opacity | | The opacity of the fill colour. | | stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | strokeWidth | PixelSize | | The width of the stroke in pixels. | | strokeOpacity | Opacity | | The opacity of the stroke colour. | | lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | 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. | | 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. | | 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. |