--- title: "Radial Gauge" framework: react version: "14.1.0" --- # Radial Gauge A Radial Gauge presents a single data point within a predefined range using a circular scale. The data is represented by a needle or bar indicating the value. ## Simple Radial Gauge #### Simple Radial Gauge ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Simple Radial Gauge](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/simple-radial-gauge) To create a Radial Gauge, use the `createGauge` API with the type `radial-gauge`. ```jsx const [options, setOptions] = useState({ type: 'radial-gauge', value: 80, scale: { min: 0, max: 100, }, }); return ; ``` In this configuration: - `value` is the value displayed by the gauge. - `scale.min` defines the minimum value of the scale. - `scale.max` defines the maximum value of the scale. - The data is represented by a coloured bar displayed over a grey scale. ## Customisation ### Needle / Bar #### Needle ```tsx import React, { useState, Fragment } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; import clone from "clone"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, }, needle: { enabled: true, }, bar: { enabled: false, }, }); const setNeedleEnabled = (enabled: boolean) => { const nextOptions = clone(options); nextOptions.needle!.enabled = enabled; setOptions(nextOptions); }; const setBarEnabled = (enabled: boolean) => { const nextOptions = clone(options); nextOptions.bar!.enabled = enabled; setOptions(nextOptions); }; return (
); }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Needle](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/needle) It is possible to display the data value using a bar, a needle or both. These are both rendered over the scale. ```js { needle: { enabled: true, }, bar: { enabled: false, }, } ``` In the above example, note that: - When the needle is enabled, the label is not shown. - When the bar is disabled, the scale defaults to showing the gradient colour instead of the solid grey. For customisation of both the bar and needle, see below or the [API Reference](#api-reference). ### Labels #### Labels ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, label: { enabled: false, }, }, label: { formatter({ value }) { return `${value.toFixed(0)}%`; }, }, secondaryLabel: { text: "Test Score", }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Labels](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/labels) Up to two inner labels can be configured with the `label` and `secondaryLabel` properties. ```js { label: { formatter({ value }) { return `${value.toFixed(0)}%`; }, }, secondaryLabel: { text: 'Test Score', }, scale: { label: { enabled: false, }, }, } ``` In this configuration: - The first label uses a `formatter` to format the value. - The second label displays a fixed `text` string. This option is only available for inner labels. - The scale labels are hidden using the `scale.label.enabled` option. See the [API Reference](#api-reference) for more details about customising the scale label style and interval. ### Segmentation To split the gauge into segments, set `segmentation.enabled` to `true`. #### Segmentation ```tsx import React, { useState, Fragment } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; import clone from "clone"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 85, scale: { min: 0, max: 100, }, segmentation: { enabled: true, interval: { count: 4, }, spacing: 2, }, }); const setSegmentationInterval = (interval: any) => { const nextOptions = clone(options); nextOptions.segmentation!.interval = interval; setOptions(nextOptions); }; return (
); }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Segmentation](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/segmentation) ```js { segmentation: { enabled: true, interval: { count: 4, }, spacing: 2, }, } ``` In this configuration: - `segmentation.interval` specifies how the gauge is segmented. Available options are: - `step` - segments the gauge at a fixed interval. - `count` - segments the gauge a fixed number of times. - `values` - segments the gauge at specific scale values. - `spacing` defines the spacing between each segment. ### Corner Radius #### Corner Radius ```tsx import React, { useState, Fragment } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; import clone from "clone"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 85, scale: { min: 0, max: 100, }, cornerRadius: 99, cornerMode: "container", segmentation: { enabled: false, interval: { count: 4, }, spacing: 2, }, }); const setCornerMode = (cornerMode: "container" | "item") => { const nextOptions = clone(options); nextOptions.cornerMode = cornerMode; setOptions(nextOptions); }; const setSegmentation = (segmented: boolean) => { const nextOptions = clone(options); nextOptions.segmentation!.enabled = segmented; setOptions(nextOptions); }; return (
Segmentation: Corners:
); }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Corner Radius](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/corner-radius) ```js { cornerRadius: 99, cornerMode: 'container', } ``` In this configuration: - `cornerRadius` specifies the amount of curvature applied to each corner. - `cornerMode` can be set to `container` to apply rounded corners only to the start and end of the gauge, or `item` for all visual items within the gauge. ### Start and End Angles #### Angles ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, }, startAngle: -135, endAngle: 135, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Angles](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/angles) The `startAngle` and `endAngle` properties can be used to customise the start and end position of the gauge. ```js { startAngle: -135, endAngle: 135, } ``` - Angles are calculated clockwise, starting from the top of the gauge. ## Colour Options ### Single Colour Both the bar and scale can be displayed using a solid fill. #### Fill ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, fill: "#f5f6fa", }, bar: { fill: "#4cd137", }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Fill](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/fill) ```js { scale: { fill: '#f5f6fa', }, bar: { fill: '#4cd137', }, } ``` ### Multiple Colours Multiple colours can be specified using the `fills` property. #### Colour Scales ```tsx import React, { useState, Fragment } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; import clone from "clone"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 85, scale: { min: 0, max: 100, }, bar: { fills: [{ color: "#00a8ff" }, { color: "#9c88ff" }, { color: "#e84118" }], fillMode: "discrete", }, }); const setFillMode = (fillMode: "continuous" | "discrete") => { const nextOptions = clone(options); nextOptions.bar!.fillMode = fillMode; setOptions(nextOptions); }; return (
Fill Mode:
); }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Colour Scales](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/fill-mode) ```js { bar: { fills: [{ color: '#00a8ff' }, { color: '#9c88ff' }, { color: '#e84118' }], fillMode: 'discrete', }, } ``` In this configuration: - `fills` specifies an array of colours to use to fill the bar. - `fillMode` can be set to `continuous` for a gradient, or `discrete` to use blocks of solid colours. The default behaviour is to space out the colours evenly. This can be customised by using colour stops. ### Colour Stops #### Scale Values ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 80, scale: { min: 0, max: 100, }, bar: { fills: [ { color: "#E84118", stop: 35 }, { color: "#FBC531", stop: 45 }, { color: "#4CD137", stop: 55 }, { color: "#FBC531", stop: 65 }, { color: "#E84118" }, ], fillMode: "discrete", }, }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Scale Values](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/scale-values) ```js { bar: { fills: [ { color: '#E84118', stop: 35 }, { color: '#FBC531', stop: 45 }, { color: '#4CD137', stop: 55 }, { color: '#FBC531', stop: 65 }, { color: '#E84118' }, ], fillMode: 'discrete', }, } ``` In this configuration: - Each colour stops at the `stop` value, and the next colour begins at that point. - If no `stop` is provided, the fills will be distributed equally. - The last colour is used until the end of the scale or bar. - Both `discrete` and `continuous` modes can be used with colour stops. ## Targets Gauges often display targets or thresholds to provide context to the displayed data value. These can be added using the `targets` configuration array. #### Targets ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 50, scale: { min: 0, max: 100, }, targets: [ { value: 70, text: "Average", }, ], }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Targets](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/targets) ```js { targets: [ { value: 70, text: 'Average', }, ], } ``` In this configuration: - `value` is the position for the target marker. - `text` is an optional string for the target label. ### Customisation #### Target Customisation ```tsx import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { AgGauge } from "ag-charts-react"; import { AgRadialGaugeOptions, AllGaugeModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, } from "ag-charts-enterprise"; ModuleRegistry.registerModules([ AllGaugeModule, AnimationModule, CrosshairModule, LegendModule, ContextMenuModule, ]); const ChartExample = () => { const [options, setOptions] = useState({ type: "radial-gauge", value: 50, scale: { min: 0, max: 100, }, targets: [ { value: 30, shape: "triangle", placement: "outside", fill: "white", strokeWidth: 2, spacing: 8, }, { value: 75, placement: "inside", shape: "triangle", fill: "white", strokeWidth: 2, spacing: 8, }, { value: 90, placement: "middle", shape: "circle", fill: "white", strokeWidth: 2, spacing: 8, }, ], }); return ; }; const root = createRoot(document.getElementById("root")!); root.render(); ``` [Live example: Target Customisation](https://www.ag-grid.com/charts/reactFunctionalTs/radial-gauge/examples/custom-targets) ```js { targets: [ { value: 30, shape: 'triangle', placement: 'outside', fill: 'white', strokeWidth: 2, spacing: 8, }, { value: 75, placement: 'inside', shape: 'triangle', fill: 'white', strokeWidth: 2, spacing: 8, }, { value: 90, placement: 'middle', shape: 'circle', fill: 'white', strokeWidth: 2, spacing: 8, }, ], } ``` In this configuration: - `shape` is a [marker shape](#reference-AgRadialGaugeOptions-targets-shape). - `placement` indicates the relative placement to the gauge - either `inside`, `outside`, or `middle`. - `size` is the size of the marker, in pixels. - `spacing` is spacing from the edge of the gauge to the marker. Ignored when `placement` is `middle`. ## API Reference #### Radial Gauge Options | Property | Type | Default | Description | | --- | --- | --- | --- | | type (required) | 'radial-gauge' | | Configuration for the Radial Gauge. | | value (required) | number \| bigint | | Value of the Radial Gauge. | | theme | AgChartTheme \| AgChartThemeName | | | | container | HTMLElement \| null | | The element to place the rendered chart into. | | width | PixelSize | | The width of the chart in pixels. | | height | PixelSize | | The height of the chart in pixels. | | minHeight | PixelSize | 300 | Sets the minimum height of the chart. Ignored if `height` is specified. | | minWidth | PixelSize | 300 | Sets the minimum width of the chart. Ignored if `width` is specified. | | padding | PixelSize \| PaddingOptions | | Configuration for the padding of the chart. A number applies uniform padding; an object sets each side. | | background | AgChartBackground | | Configuration for the background shown behind the chart. | | background.visible | boolean | | Whether the background should be visible. | | background.fill | CssColor | | Colour of the chart background. | | background.image | AgChartBackgroundImage | | Background image. May be combined with fill colour. | | background.image.url (required) | string | | URL of the image. | | background.image.left | PixelSize | | Distance from the left border of the chart to the left border of the image. If neither left nor right specified, the image is centred horizontally. | | background.image.top | PixelSize | | Distance from the top border of the chart to the top border of the image. If neither top nor bottom specified, the image is centred vertically. | | background.image.right | PixelSize | | Distance from the right border of the chart to the right border of the image. If neither left nor right specified, the image is centred horizontally. | | background.image.bottom | PixelSize | | Distance from the bottom border of the chart to the bottom border of the image. If neither top nor bottom specified, the image is centred vertically. | | background.image.width | PixelSize | | Width of the image. If both left and width are specified, right is ignored. If only height is provided, width will be computed to preserve the original width/height ratio. If neither is provided, the original width is used. | | background.image.height | PixelSize | | Height of the image. If both top and height are specified, bottom is ignored. If only width is provided, height will be computed to preserve the original width/height ratio. If neither is provided, the original height is used. | | background.image.opacity | Opacity | | Opacity of the image. | | title | AgChartCaptionOptions | | Configuration for the title shown at the top of the chart. | | title.enabled | boolean | | Whether the text should be shown. | | title.text | TextValue \| ContentSegment[] | | The text to display. Plain text, or an array of segments for rich content. | | title.textAlign | 'left' \| 'center' \| 'right' | | Horizontal position of the text. | | title.fontStyle | FontStyle | | The font style to use for the text. | | title.fontWeight | FontWeight | | The font weight to use for the text. | | title.fontSize | FontSize | | The font size in pixels to use for the text. | | title.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the text. A single family name, or an array of names used as fallbacks. | | title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the text. A colour string, or a theme-colour reference object. | | title.spacing | PixelSize | | Spacing added to help position the text. | | title.maxWidth | PixelSize | | Used to constrain the width of the title before text is wrapped or truncated. | | title.maxHeight | PixelSize | | Used to constrain the height of the title before text is truncated. | | title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'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 `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. | | title.tooltip | AgCaptionTooltipOptions | | Configuration for the caption tooltip shown on hover. | | title.tooltip.visible | 'auto' \| 'always' \| 'never' | | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled. Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. | | title.tooltip.text | string | | Static text to display in the tooltip. Overrides the default caption text. | | title.tooltip.renderer | Renderer | | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`. Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. | | title.border | BorderOptions | | Stroke options for the box border. | | title.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | title.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | title.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | title.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | title.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | title.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | title.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. | | title.fillOpacity | Opacity | | The opacity of the fill colour. | | subtitle | AgChartSubtitleOptions | | Configuration for the subtitle shown beneath the chart title. | | subtitle.enabled | boolean | | Whether the text should be shown. | | subtitle.text | TextValue \| ContentSegment[] | | The text to display. Plain text, or an array of segments for rich content. | | subtitle.textAlign | 'left' \| 'center' \| 'right' | | Horizontal position of the text. | | subtitle.fontStyle | FontStyle | | The font style to use for the text. | | subtitle.fontWeight | FontWeight | | The font weight to use for the text. | | subtitle.fontSize | FontSize | | The font size in pixels to use for the text. | | subtitle.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the text. A single family name, or an array of names used as fallbacks. | | subtitle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the text. A colour string, or a theme-colour reference object. | | subtitle.spacing | PixelSize | | Spacing added to help position the text. | | subtitle.maxWidth | PixelSize | | Used to constrain the width of the title before text is wrapped or truncated. | | subtitle.maxHeight | PixelSize | | Used to constrain the height of the title before text is truncated. | | subtitle.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'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 `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. | | subtitle.tooltip | AgCaptionTooltipOptions | | Configuration for the caption tooltip shown on hover. | | subtitle.tooltip.visible | 'auto' \| 'always' \| 'never' | | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled. Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. | | subtitle.tooltip.text | string | | Static text to display in the tooltip. Overrides the default caption text. | | subtitle.tooltip.renderer | Renderer | | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`. Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. | | subtitle.border | BorderOptions | | Stroke options for the box border. | | subtitle.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | subtitle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | subtitle.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | subtitle.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | subtitle.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | subtitle.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | subtitle.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. | | subtitle.fillOpacity | Opacity | | The opacity of the fill colour. | | footnote | AgChartFooterOptions | | Configuration for the footnote shown at the bottom of the chart. | | footnote.enabled | boolean | | Whether the text should be shown. | | footnote.text | TextValue \| ContentSegment[] | | The text to display. Plain text, or an array of segments for rich content. | | footnote.textAlign | 'left' \| 'center' \| 'right' | | Horizontal position of the text. | | footnote.fontStyle | FontStyle | | The font style to use for the text. | | footnote.fontWeight | FontWeight | | The font weight to use for the text. | | footnote.fontSize | FontSize | | The font size in pixels to use for the text. | | footnote.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the text. A single family name, or an array of names used as fallbacks. | | footnote.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the text. A colour string, or a theme-colour reference object. | | footnote.spacing | PixelSize | | Spacing added to help position the text. | | footnote.maxWidth | PixelSize | | Used to constrain the width of the title before text is wrapped or truncated. | | footnote.maxHeight | PixelSize | | Used to constrain the height of the title before text is truncated. | | footnote.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'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 `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. | | footnote.tooltip | AgCaptionTooltipOptions | | Configuration for the caption tooltip shown on hover. | | footnote.tooltip.visible | 'auto' \| 'always' \| 'never' | | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled. Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. | | footnote.tooltip.text | string | | Static text to display in the tooltip. Overrides the default caption text. | | footnote.tooltip.renderer | Renderer | | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`. Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. | | footnote.border | BorderOptions | | Stroke options for the box border. | | footnote.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | footnote.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | footnote.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | footnote.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | footnote.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | footnote.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | footnote.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. | | footnote.fillOpacity | Opacity | | The opacity of the fill colour. | | tooltip | AgChartTooltipOptions | | Global configuration that applies to all tooltips in the chart. | | tooltip.enabled | boolean | | Set to `false` to disable tooltips for all series in the chart. | | tooltip.mode | 'single' \| 'shared' \| 'compact' | | Group multiple series into the same tooltip | | 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. This will be used unless overridden by the series `tooltip.range` option. | | tooltip.position | AgTooltipPositionOptions | | The position of the tooltip. This will be used unless overridden by the series `tooltip.range` option. | | 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.pagination | boolean | | The configuration for tooltip pagination. | | tooltip.delay | DurationMs | | The time interval (in milliseconds) after which the tooltip is shown. | | tooltip.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'hyphenate' | Text wrapping strategy for tooltips. - `'always'` will always wrap text to fit within the tooltip. - `'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 tooltip dimensions, the text will be truncated. - `'never'` disables text wrapping. | | animation | AgAnimationOptions | | Configuration for chart animations. | | animation.enabled | boolean | | Set to `true` to enable the animation module. Defaults to `false` when `flashOnUpdate.enabled` is `true`. | | animation.duration | DurationMs | | The total duration of the animation on initial load and updates. | | contextMenu | AgContextMenuOptions | | Configuration for the context menu. | | contextMenu.enabled | boolean | true | Whether to show the context menu. | | contextMenu.items | AgContextMenuItem[] | ['defaults'] | List of menu items (and submenus) for the context menu. | | contextMenu.getItems | AgContextMenuGetItemsCallback | undefined | Callback to list the menu items (and submenus) for the context menu. Overrides `items` if return-value is defined, otherwise `items` is used as a fallback. | | context | ContextDefault | | Context object to use in callbacks. | | locale | AgLocaleOptions | | Configuration for localisation. | | locale.localeText | Record | | A record of locale texts keyed by id. | | locale.getLocaleText | Formatter | | Formatter that generates the text displayed to the user. | | listeners | AgBaseChartListeners | | 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 any series is clicked. Useful for a chart containing multiple series. | | listeners.seriesNodeDoubleClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. | | listeners.seriesVisibilityChange | Listener | | The listener to call when a series visibility is changed. | | listeners.activeChange | Listener | | The listener to call when the active state (highlight/tooltip) is changed. | | listeners.selectionChange | Listener | | The listener to call when data selection is changed | | listeners.collapsedChange | Listener | | The listener to call when collapsed items are changed. | | listeners.click | Listener | | The listener to call when the chart is clicked. | | listeners.doubleClick | Listener | | The listener to call when the chart is double-clicked. | | listeners.annotations | Listener | | The listener to call when the annotations are changed. | | listeners.zoom | Listener | | The listener to call when the zoom is changed. | | targets | AgRadialGaugeTarget[] | | Configuration for the targets. | | targets.value (required) | number \| bigint | | Value to use to position the target | | targets.text | string | | Text to use for the target label. | | targets.shape | AgMarkerShape \| 'line' | | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. | | targets.placement | 'inside' \| 'outside' \| 'middle' | | Placement of target. | | targets.spacing | PixelSize | | Spacing of the target. Ignored when placement is 'middle'. | | targets.size | PixelSize | | Size of the target. | | targets.rotation | Degree | | Rotation of the target, in degrees. | | targets.label | AgRadialGaugeTargetLabelOptions | | Label options for all targets. | | targets.label.spacing | PixelSize | | Spacing of the label. | | targets.label.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | targets.label.format | string | | Format string used when rendering labels. | | targets.label.itemStyler | Styler | | Function used to style individual datum labels. | | targets.label.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | targets.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | targets.label.fontSize | FontSize | | The size of the font in pixels for text elements. | | targets.label.fontFamily | FontFamily | | The font family for text elements. | | targets.label.fontStyle | FontStyle | | The style to use for text elements. | | targets.label.fontWeight | FontWeight | | The font weight to use for text elements. | | targets.label.border | BorderOptions | | Stroke options for the box border. | | targets.label.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | targets.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | targets.label.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | targets.label.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | targets.label.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | targets.label.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | targets.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. | | targets.label.fillOpacity | Opacity | | The opacity of the fill colour. | | targets.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. | | targets.fillOpacity | Opacity | | The opacity of the fill colour. | | targets.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | targets.strokeWidth | PixelSize | | The width of the stroke in pixels. | | targets.strokeOpacity | Opacity | | The opacity of the stroke colour. | | targets.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | targets.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | outerRadius | PixelSize | | Outer radius of the gauge. | | innerRadius | PixelSize | | Inner radius of the gauge. | | outerRadiusRatio | Ratio | | Ratio of the outer radius of the gauge. | | innerRadiusRatio | Ratio | | Ratio of the inner radius of the gauge. | | startAngle | Degree | | Angle in degrees of the start of the gauge. | | endAngle | Degree | | Angle in degrees of the end of the gauge. | | segmentation | AgGaugeSegmentation | | Configuration for a segmented appearance. | | segmentation.enabled | boolean | | Enable segmentation. | | segmentation.interval | AgGaugeSegmentationInterval | | Configuration for the segmentation. | | segmentation.interval.step | number \| bigint | | The segmentation interval. If the configured interval results in too many items given the chart size, it will be ignored. | | segmentation.interval.values | Array | | Array of values for specified intervals along the gauge. | | segmentation.interval.count | number | | Number of evenly-divided segments in the gauge. | | segmentation.spacing | number | | The spacing between segments. | | cornerRadius | number | | Apply rounded corners to the gauge. | | cornerMode | 'container' \| 'item' | container | Configuration on whether to apply `cornerRadius` only to the ends of the gauge, or each individual item within the gauge. | | needle | AgRadialGaugeNeedleStyle | | Configuration for the needle. | | needle.enabled | boolean | | Whether the needle should be shown. | | needle.radiusRatio | number | | Ratio of the size of the needle. | | needle.spacing | number | | Spacing between radiusRatio, in pixels. | | needle.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. | | needle.fillOpacity | Opacity | | The opacity of the fill colour. | | needle.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | needle.strokeWidth | PixelSize | | The width of the stroke in pixels. | | needle.strokeOpacity | Opacity | | The opacity of the stroke colour. | | needle.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | needle.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | scale | AgRadialGaugeScale | | Configuration for the scale. | | scale.min | number \| bigint | | Maximum value of the scale. Any values exceeding this number will be clipped to this maximum. | | scale.max | number \| bigint | | Minimum value of the scale. Any values exceeding this number will be clipped to this minimum. | | scale.label | AgRadialGaugeScaleLabel | | Configuration for the scale labels. | | scale.label.enabled | boolean | | Set to `false` to hide the scale labels. | | scale.label.fontStyle | FontStyle | | The font style to use for the labels. | | scale.label.fontWeight | FontWeight | | The font weight to use for the labels. | | scale.label.fontSize | FontSize | | The font size in pixels to use for the labels. | | scale.label.fontFamily | FontFamily | | The font family to use for the labels | | scale.label.spacing | PixelSize | | Spacing in pixels between the scale label and the tick. | | scale.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the labels. A colour string, or a theme-colour reference object. | | scale.label.rotation | Degree | | The rotation of the scale labels in degrees. | | scale.label.avoidCollisions | boolean | | Avoid scale label collision by automatically reducing the number of ticks displayed. If set to `false`, scale labels may collide. | | scale.label.minSpacing | PixelSize | | Minimum gap in pixels between the scale labels before being removed to avoid collisions. | | scale.label.format | string | | Format string used when rendering labels. | | scale.label.formatter | Formatter | | Function used to render scale labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` | | scale.interval | AgRadialGaugeScaleInterval | | Configuration for the ticks interval. | | scale.interval.values | Array | | Array of values in scale units for specified intervals along the scale. The values in this array must be compatible with the scale type. | | scale.interval.step | number \| bigint | | The scale interval. Expressed in the units of the scale. If the configured interval results in too many items given the chart size, it will be ignored. | | scale.fills | AgGaugeColorStop[] | | Configuration for two or more colours, and the values they are rendered at. | | scale.fills.color | string | | Colour of this category. | | scale.fills.stop | number \| bigint | | Stop value of this category. Defaults the maximum value if unset. | | scale.fillMode | 'continuous' \| 'discrete' | continuous | Configuration the fills should be rendered. | | scale.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. | | scale.fillOpacity | Opacity | | The opacity of the fill colour. | | scale.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | scale.strokeWidth | PixelSize | | The width of the stroke in pixels. | | scale.strokeOpacity | Opacity | | The opacity of the stroke colour. | | scale.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | scale.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | bar | AgRadialGaugeBarStyle | | Configuration for the bar. | | bar.enabled | boolean | | Whether the bar should be shown. | | bar.fills | AgGaugeColorStop[] | | Configuration for two or more colours, and the values they are rendered at. | | bar.fills.color | string | | Colour of this category. | | bar.fills.stop | number \| bigint | | Stop value of this category. Defaults the maximum value if unset. | | bar.fillMode | 'continuous' \| 'discrete' | continuous | Configuration the fills should be rendered. | | 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. | | bar.fillOpacity | Opacity | | The opacity of the fill colour. | | bar.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | bar.strokeWidth | PixelSize | | The width of the stroke in pixels. | | bar.strokeOpacity | Opacity | | The opacity of the stroke colour. | | bar.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | bar.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | label | AgRadialGaugeLabelOptions | | Configuration for the labels shown inside the shape. | | label.text | string | | Text to always display. | | label.spacing | PixelSize | | The distance between the label and secondary label, if both are present | | label.lineHeight | FontSize | | Line height to use for the label. | | label.minimumFontSize | FontSize | | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. | | label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'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 tile dimensions, the text will be truncated. - `'never'` disables text wrapping. | | label.overflowStrategy | 'ellipsis' \| 'hide' | | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow | | 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. | | secondaryLabel | AgRadialGaugeSecondaryLabelOptions | | Configuration for the labels shown inside the shape. | | secondaryLabel.text | string | | Text to always display. | | secondaryLabel.lineHeight | FontSize | | Line height to use for the label. | | secondaryLabel.minimumFontSize | FontSize | | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. | | secondaryLabel.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'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 tile dimensions, the text will be truncated. - `'never'` disables text wrapping. | | secondaryLabel.overflowStrategy | 'ellipsis' \| 'hide' | | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow | | secondaryLabel.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | secondaryLabel.format | string | | Format string used when rendering labels. | | secondaryLabel.itemStyler | Styler | | Function used to style individual datum labels. | | secondaryLabel.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | secondaryLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | secondaryLabel.fontSize | FontSize | | The size of the font in pixels for text elements. | | secondaryLabel.fontFamily | FontFamily | | The font family for text elements. | | secondaryLabel.fontStyle | FontStyle | | The style to use for text elements. | | secondaryLabel.fontWeight | FontWeight | | The font weight to use for text elements. | | secondaryLabel.border | BorderOptions | | Stroke options for the box border. | | secondaryLabel.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | secondaryLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | secondaryLabel.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | secondaryLabel.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | secondaryLabel.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | secondaryLabel.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | secondaryLabel.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. | | secondaryLabel.fillOpacity | Opacity | | The opacity of the fill colour. | | spacing | PixelSize | | Distance between the shape edges and the text. | | cursor | string | | The cursor to use for the gauge. This config is identical to the CSS `cursor` property. | | highlight | AgHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | 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. | | 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. |