--- title: "Radial Column Series" enterprise: true framework: javascript version: "14.1.0" --- # Radial Column Series A Radial Column Series, also called *Circular Column*, visualises data through rectangular columns arranged along a polar axis. ## Simple Radial Column #### Simple Radial Column ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, AngleCategoryAxisModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Simple Radial Column](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/simple-radial-column) To create a Radial Column Series, use the `radial-column` series type. ```js { series: [ { type: 'radial-column', angleKey: 'quarter', radiusKey: 'software', radiusName: 'Software' }, { type: 'radial-column', angleKey: 'quarter', radiusKey: 'hardware', radiusName: 'Hardware' }, { type: 'radial-column', angleKey: 'quarter', radiusKey: 'services', radiusName: 'Services' }, ], } ``` In this configuration: - `angleKey` is set to 'quarter', which is the shared category for the Angle Axis. - `radiusKey` specifies the numerical datasets, 'software', 'hardware' and 'services', for the Radius Axis. - `radiusName` labels each series, such as 'Software', 'Hardware' and 'Services'. ## Stacked Radial Column In a Stacked Radial Column chart, columns are vertically stacked within each category to represent a cumulative total, allowing analysis of both single data points and overall category totals. #### Stacked Radial Column ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, AngleCategoryAxisModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", stacked: true, }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", stacked: true, }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", stacked: true, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Stacked Radial Column](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/stacked-radial-column) To stack columns in a Radial Column Series, enable the `stacked` series property. ```js { series: [ { type: 'radial-column', angleKey: 'quarter', radiusKey: 'software', stacked: true }, { type: 'radial-column', angleKey: 'quarter', radiusKey: 'hardware', stacked: true }, { type: 'radial-column', angleKey: 'quarter', radiusKey: 'services', stacked: true }, ], } ``` ## Customisation ### Inner Radius The inner radius can be used to create a 'donut' effect. #### Inner Radius ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AngleCategoryAxisModule, AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", }, ], axes: { angle: { type: "angle-category", }, radius: { type: "radius-number", innerRadiusRatio: 0.2, }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Inner Radius](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/inner-radius) This is changed via the `innerRadiusRatio` option on the Radius Number Axis. ```js { axes: { angle: { type: 'angle-category' }, radius: { type: 'radius-number', innerRadiusRatio: 0.2 }, }, } ``` Any value between `0` and `1` will set the inner radius as a proportion of the overall radius. ### Category Padding #### Category Padding ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AngleCategoryAxisModule, AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", grouped: true, }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", grouped: true, }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", grouped: true, }, ], axes: { angle: { type: "angle-category", groupPaddingInner: 0.5, paddingInner: 0.5, }, radius: { type: "radius-number", innerRadiusRatio: 0.2, }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Category Padding](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/category-padding) The following options are used to control the padding between different elements on the Angle Axis: - `paddingInner`: Gap between column groups, ranges from `0` (no gap) to `1` (maximum spacing). - `groupPaddingInner`: Spacing within a group, ranges from `0` (columns touching) to `1` (widest gap). ```js { axes: { angle: { type: 'angle-category', groupPaddingInner: 0.5, paddingInner: 0.5 }, radius: { type: 'radius-number', innerRadiusRatio: 0.2 }, }, } ``` ### Axis Label Orientation #### Axis Label Orientation ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AngleCategoryAxisModule, AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", }, ], axes: { angle: { type: "angle-category", label: { orientation: "parallel", }, }, radius: { type: "radius-number", }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Axis Label Orientation](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/axis-label-orientation) To change Angle Axis Label orientation, use the `label.orientation` property with these options: - `fixed`: Labels have fixed orientation (default). - `parallel`: Labels align parallel to the axis. - `perpendicular`: Labels align perpendicular to the axis. The following configuration changes the orientation of the Axis Labels to `parallel` : ```js { axes: { angle: { type: 'angle-category', label: { orientation: 'parallel', }, }, radius: { type: 'radius-number' }, }, } ``` ### Radius Axis Position #### Radius Axis Position ```ts import { AgChartOptions, AgCharts, AngleCategoryAxisModule, AnimationModule, ContextMenuModule, CrosshairModule, LegendModule, ModuleRegistry, RadialColumnSeriesModule, RadiusNumberAxisModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([ AngleCategoryAxisModule, AnimationModule, CrosshairModule, LegendModule, RadialColumnSeriesModule, RadiusNumberAxisModule, ContextMenuModule, ]); const options: AgChartOptions = { data: getData(), title: { text: "Revenue by Product Category", }, subtitle: { text: "Millions USD", }, series: [ { type: "radial-column", angleKey: "quarter", radiusKey: "software", radiusName: "Software", }, { type: "radial-column", angleKey: "quarter", radiusKey: "hardware", radiusName: "Hardware", }, { type: "radial-column", angleKey: "quarter", radiusKey: "services", radiusName: "Services", }, ], axes: { angle: { type: "angle-category", }, radius: { type: "radius-number", innerRadiusRatio: 0.25, positionAngle: 90, label: { rotation: -90, }, }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Radius Axis Position](https://www.ag-grid.com/charts/typescript/radial-column-series/examples/radius-axis-position) Customise the Radius Axis Line position via `positionAngle` and Axis Label rotation using `label.rotation`: ```js { axes: { angle: { type: 'angle-category' }, radius: { type: 'radius-number', positionAngle: 90, label: { rotation: -90, }, }, }, } ``` ## API Reference #### Radial Column Series | Property | Type | Default | Description | | --- | --- | --- | --- | | type (required) | 'radial-column' | | Configuration for Radial Column Series. | | angleKey (required) | DatumKey | | The key to use to retrieve angle values from the data. | | radiusKey (required) | DatumKey | | The key to use to retrieve radius values from the data. | | columnWidthRatio | Ratio | | The ratio used to calculate the column width based on the circumference and padding between items. | | maxColumnWidthRatio | Ratio | | Prevents columns from becoming too wide. This value is relative to the diameter of the polar chart. | | label | AgChartLabelOptions | | Configuration for the labels shown on top of data points. | | 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. | | 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. | | styler | Styler | | Function used to return formatting for entire series, based on the given parameters. | | itemStyler | Styler | | A styler function for adjusting the styling of the radial columns. | | highlight | AgMultiSeriesHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | highlight.highlightedSeries | AgRadialHighlightStyleOptions | | 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 | AgRadialHighlightStyleOptions | | 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 | AgRadialHighlightStyleOptions | | 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 | AgRadialHighlightStyleOptions | | 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. | | 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. | | normalizedTo | number | | The number to normalise the bar stacks to. Has no effect unless series are stacked. | | grouped | boolean | | Whether to group together (adjacently) separate sectors. | | stacked | boolean | | An option indicating if the sectors should be stacked. | | stackGroup | string | | An ID to be used to group stacked items. | | 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. | | angleName | string | | A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters. | | radiusName | string | | A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters. | | legendItemName | string | | The text to display in the legend for this series. If supplied, matching items with the same value will be toggled together. | #### Angle Category Axis | Property | Type | Default | Description | | --- | --- | --- | --- | | type | 'angle-category' | | Axis type identifier. | | shape | 'polygon' \| 'circle' | | Shape of axis. Default: `polygon` | | startAngle | Degree | | Angle in degrees to start ticks positioning from. | | endAngle | Degree | | Angle in degrees to end ticks positioning at. | | crossLines | Array | | Add cross lines or regions corresponding to data values. | | groupPaddingInner | Ratio | | This property is for grouped polar series plotted on a angle category axis. It is a proportion between 0 and 1 which determines the size of the gap between the items within a single group along the angle axis. | | paddingInner | Ratio | | This property is for grouped polar series plotted on a angle category axis. It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis. | | context | ContextDefault | | Context object to use in callbacks. | | reverse | boolean | | Reverse the axis scale domain if `true`. | | line | AgAxisLineOptions | | Configuration for the axis line. | | line.enabled | boolean | | Set to `false` to hide the axis line. | | line.width | PixelSize | | The width in pixels of the axis line. | | line.stroke | CssColor | | The colour of the axis line. | | gridLine | AgAxisGridLineOptions | | Configuration for the axis grid lines. | | gridLine.enabled | boolean | | Set to `false` to hide the axis grid lines. | | gridLine.width | PixelSize | | The width in pixels of the axis grid lines. | | gridLine.style | AgAxisGridStyle[] | | Configuration of the lines used to form the grid in the chart series area. | | gridLine.style.fill | CssColor | | The colour of the fill between grid lines. | | gridLine.style.fillOpacity | Ratio | | The opacity of the fill between grid lines. | | gridLine.style.stroke | CssColor | | The colour of the grid line. | | gridLine.style.strokeWidth | PixelSize | | The width of the grid line in pixels. | | gridLine.style.lineDash | PixelSize[] | | Defines how the grid lines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. | | label | AgAngleAxisLabelOptions | | Configuration for the axis labels, shown next to the ticks. | | label.enabled | boolean | | Set to `false` to hide the axis labels. | | label.rotation | Degree | | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. | | label.avoidCollisions | boolean | | Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide. | | label.minSpacing | PixelSize | | Minimum gap in pixels between the axis labels before being removed to avoid collisions. | | label.formatter | RichFormatter | | Function used to render axis 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` | | label.itemStyler | Styler | | Function used to style axis labels. | | label.fontStyle | FontStyle | | The font style to use for the labels. | | label.fontWeight | FontWeight | | The font weight to use for the labels. | | label.fontSize | FontSize | | The font size in pixels to use for the labels. | | label.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the labels. A single family name, or an array of names used as fallbacks. | | label.spacing | PixelSize | | Spacing in pixels between the axis label and the tick. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the labels. A colour string, or a theme-colour reference object. | | 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.orientation | 'fixed' \| 'parallel' \| 'perpendicular' | fixed | Label orientation. `fixed` - all labels remain in a fixed orientation of horizontal text. `parallel` - labels are in a circle around the axis. `perpendicular` - labels are in the radial direction perpendicular to the axis. | | tick | AgAxisBaseTickOptions | | Configuration for the axis ticks. | | tick.enabled | boolean | | Set to `false` to hide the axis ticks. | | tick.width | PixelSize | | The width in pixels of the axis ticks. | | tick.size | PixelSize | | The length in pixels of the axis ticks. | | tick.stroke | CssColor | | The colour of the axis ticks. | | interval | AgAxisBaseIntervalOptions | | Configuration for the axis ticks interval. | | interval.values | any[] | | Array of values in axis units for specified intervals along the axis. The values in this array must be compatible with the axis type. | | interval.minSpacing | PixelSize | | Minimum gap in pixels between intervals. | #### Radius Number Axis | Property | Type | Default | Description | | --- | --- | --- | --- | | type | 'radius-number' | | Axis type identifier. | | positionAngle | Degree | | The rotation angle of axis line and labels in degrees. | | shape | 'polygon' \| 'circle' | | Shape of axis. Default: `polygon` | | title | AgAxisCaptionOptions | | Configuration for the title shown next to the axis. | | title.enabled | boolean | | Whether the title should be shown. | | title.text | string | | The text to show in the title. | | title.fontStyle | FontStyle | | The font style to use for the title. | | title.fontWeight | FontWeight | | The font weight to use for the title. | | title.fontSize | FontSize | | The font size in pixels to use for the title. | | title.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the title. A single family name, or an array of names used as fallbacks. | | title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the title. A colour string, or a theme-colour reference object. | | title.spacing | PixelSize | | Spacing between the axis labels and the axis title. | | title.maxWidth | PixelSize | | Used to constrain the size of the title along the text direction before wrapping or truncation. | | title.maxHeight | PixelSize | | Used to constrain the size of the title across the text direction before wrapping or truncation. | | title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'always' | 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.truncate | boolean | true | Whether the title text should be automatically truncated to fit the available axis length. | | title.formatter | RichFormatter | | Formatter to allow dynamic axis title calculation. | | crossLines | Array | | Add cross lines or regions corresponding to data values. | | innerRadiusRatio | Ratio | | The ratio of the inner radius of the axis as a proportion of the overall radius. Used to create an inner circle. | | context | ContextDefault | | Context object to use in callbacks. | | reverse | boolean | | Reverse the axis scale domain if `true`. | | line | AgAxisLineOptions | | Configuration for the axis line. | | line.enabled | boolean | | Set to `false` to hide the axis line. | | line.width | PixelSize | | The width in pixels of the axis line. | | line.stroke | CssColor | | The colour of the axis line. | | gridLine | AgAxisGridLineOptions | | Configuration for the axis grid lines. | | gridLine.enabled | boolean | | Set to `false` to hide the axis grid lines. | | gridLine.width | PixelSize | | The width in pixels of the axis grid lines. | | gridLine.style | AgAxisGridStyle[] | | Configuration of the lines used to form the grid in the chart series area. | | gridLine.style.fill | CssColor | | The colour of the fill between grid lines. | | gridLine.style.fillOpacity | Ratio | | The opacity of the fill between grid lines. | | gridLine.style.stroke | CssColor | | The colour of the grid line. | | gridLine.style.strokeWidth | PixelSize | | The width of the grid line in pixels. | | gridLine.style.lineDash | PixelSize[] | | Defines how the grid lines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. | | label | AgRadiusAxisFormattableLabelOptions | | Configuration for the axis labels, shown next to the ticks. | | label.format | string | | Format string used when rendering labels. | | label.enabled | boolean | | Set to `false` to hide the axis labels. | | label.rotation | Degree | | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. | | label.avoidCollisions | boolean | | Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide. | | label.minSpacing | PixelSize | | Minimum gap in pixels between the axis labels before being removed to avoid collisions. | | label.formatter | RichFormatter | | Function used to render axis 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` | | label.itemStyler | Styler | | Function used to style axis labels. | | label.fontStyle | FontStyle | | The font style to use for the labels. | | label.fontWeight | FontWeight | | The font weight to use for the labels. | | label.fontSize | FontSize | | The font size in pixels to use for the labels. | | label.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the labels. A single family name, or an array of names used as fallbacks. | | label.spacing | PixelSize | | Spacing in pixels between the axis label and the tick. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the labels. A colour string, or a theme-colour reference object. | | 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. | | tick | AgAxisBaseTickOptions | | Configuration for the axis ticks. | | tick.enabled | boolean | | Set to `false` to hide the axis ticks. | | tick.width | PixelSize | | The width in pixels of the axis ticks. | | tick.size | PixelSize | | The length in pixels of the axis ticks. | | tick.stroke | CssColor | | The colour of the axis ticks. | | nice | boolean | | If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options. | | interval | AgAxisContinuousIntervalOptions | | Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval. | | interval.step | number \| bigint | | The axis interval. Expressed in the units of the axis. If the configured interval results in too many items given the chart size, it will be ignored. `bigint` steps are accepted but precision is limited to the Number range. | | interval.maxSpacing | PixelSize | | Maximum gap in pixels between items. | | interval.values | any[] | | Array of values in axis units for specified intervals along the axis. The values in this array must be compatible with the axis type. | | interval.minSpacing | PixelSize | | Minimum gap in pixels between intervals. | | min | number \| bigint | | The min value for the axis domain. | | max | number \| bigint | | The max value for the axis domain. | | preferredMin | number \| bigint | | The min value for the axis, unless extended by the series data or `nice` option. | | preferredMax | number \| bigint | | The max value for the axis, unless extended by the series data or `nice` option. |