AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsRadial Column Series

Version 14.2.0
Enterprise

A Radial Column Series, also called Circular Column, visualises data through rectangular columns arranged along a polar axis.

Simple Radial Column Copy Link

To create a Radial Column Series, use the radial-column series type.

{
    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 Copy Link

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.

To stack columns in a Radial Column Series, enable the stacked series property.

{
    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 Copy Link

Inner Radius Copy Link

The inner radius can be used to create a 'donut' effect.

This is changed via the innerRadiusRatio option on the Radius Number Axis.

{
    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 Copy Link

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).
{
    axes: {
        angle: { type: 'angle-category', groupPaddingInner: 0.5, paddingInner: 0.5 },
        radius: { type: 'radius-number', innerRadiusRatio: 0.2 },
    },
}

Axis Label Orientation Copy Link

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 :

{
    axes: {
        angle: {
            type: 'angle-category',
            label: {
                orientation: 'parallel',
            },
        },
        radius: { type: 'radius-number' },
    },
}

Radius Axis Position Copy Link

Customise the Radius Axis Line position via positionAngle and Axis Label rotation using label.rotation:

{
    axes: {
        angle: { type: 'angle-category' },
        radius: {
            type: 'radius-number',
            positionAngle: 90,
            label: {
                rotation: -90,
            },
        },
    },
}

Radial Column Chart Examples Copy Link

See more Radial Column Chart examples in the AG Charts Gallery.

Radial Column Chart Example
Grouped Radial Column Chart Example
Reversed Radial Column Chart Example

API Reference Copy Link

Properties available on the AgRadialColumnSeriesOptions interface.

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.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
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.
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.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
showInLegend boolean
Whether to include the series in the legend.
listeners AgSeriesListeners
A map of event names to event listeners.
cornerRadius PixelSize
Apply rounded corners to each bar.
fill AgColorType
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 AgCssColorOrRef
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 default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
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.

Properties available on the AgAngleCategoryAxisOptions interface.

type 'angle-category'
Axis type identifier.
shape AgPolarAxisShape
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 AgAngleCrossLineOptions[]
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.
gridLine AgAxisGridLineOptions
Configuration for the axis grid lines.
label AgAngleAxisLabelOptions
Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions
Configuration for the axis ticks.
interval AgAxisBaseIntervalOptions
Configuration for the axis ticks interval.

Properties available on the AgRadiusNumberAxisOptions interface.

type 'radius-number'
Axis type identifier.
positionAngle Degree
The rotation angle of axis line and labels in degrees.
shape AgPolarAxisShape
Shape of axis. Default: `polygon`
title AgAxisCaptionOptions
Configuration for the title shown next to the axis.
crossLines AgRadiusCrossLineOptions[]
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.
gridLine AgAxisGridLineOptions
Configuration for the axis grid lines.
label AgRadiusAxisFormattableLabelOptions
Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions
Configuration for 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.
min AgNumericValue
The min value for the axis domain.
max AgNumericValue
The max value for the axis domain.
preferredMin AgNumericValue
The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgNumericValue
The max value for the axis, unless extended by the series data or `nice` option.