React ChartsRadial Column Series
Enterprise

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

Simple Radial Column

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

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

Inner Radius

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

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

axes: [
    { type: 'angle-category' },
    { 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

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

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 :

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

Radius Axis Position

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

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

API Reference

Properties available on the AgRadialColumnSeriesOptions interface.

Type'radial-column'

Configuration for Radial Column Series.

Typestring

The key to use to retrieve angle values from the data.

Typestring

The key to use to retrieve radius values from the data.

TypeRatio

The ratio used to calculate the column width based on the circumference and padding between items.

TypeRatio

Prevents columns from becoming too wide. This value is relative to the diameter of the polar chart.

TypeAgChartLabelOptions

Configuration for the labels shown on top of data points.

TypeFunction

A formatter function for adjusting the styling of the radial columns.

TypeCssColor

The colour for the stroke.

TypePixelSize

The width of the stroke in pixels.

TypeOpacity

The opacity of the stroke colour.

TypePixelSize[]

An array specifying the length in pixels of alternating dashes and gaps.

TypePixelSize

The initial offset of the dashed line in pixels.

TypeCssColor

The colour for filling shapes.

TypeOpacity

The opacity of the fill colour.

Typestring

The cursor to use for hovered markers. This config is identical to the CSS cursor property.

TypeAgSeriesHighlightStyle

Configuration for marker and series highlighting when a series or legend item is hovered over.

TypeInteractionRange

Range from a node that a click triggers the listener.

Typeboolean

Whether to include the series in the legend.

TypeAgSeriesListeners

A map of event names to event listeners.

Typenumber

The number to normalise the bar stacks to. Has no effect unless series are stacked.

Typeboolean

Whether to group together (adjacently) separate sectors.

Typeboolean

An option indicating if the sectors should be stacked.

Typestring

An ID to be used to group stacked items.

Typestring

Defaultauto-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.

TypeTDatum[]

The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.

Typeboolean

Whether to display the series.

Typestring

A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.

Typestring

A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.

Properties available on the AgAngleCategoryAxisOptions interface.

Type'angle-category'

Axis type identifier.

TypeAgAxisCategoryTickOptions

Configuration for the axis ticks.

TypeAgPolarAxisShape

Shape of axis. Default: polygon

TypeDegree

Angle in degrees to start ticks positioning from.

TypeDegree

Angle in degrees to end ticks positioning at. It should be greater than startAngle.

TypeAgAngleCrossLineOptions[]

Add cross lines or regions corresponding to data values.

TypeRatio

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.

TypeRatio

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.

Typeboolean

Reverse the axis scale domain if true.

TypeAgAxisLineOptions

Configuration for the axis line.

TypeAgAxisGridLineOptions

Configuration for the axis grid lines.

TypeAgAngleAxisLabelOptions

Configuration for the axis labels, shown next to the ticks.

Properties available on the AgRadiusNumberAxisOptions interface.

Type'radius-number'

Axis type identifier.

Typeboolean

If true, the range will be rounded up to ensure nice equal spacing between the ticks.

Typenumber

User override for the automatically determined min value (based on series data).

Typenumber

User override for the automatically determined max value (based on series data).

TypeDegree

The rotation angle of axis line and labels in degrees.

TypeAgAxisNumberTickOptions

Configuration for the axis ticks.

TypeAgPolarAxisShape

Shape of axis. Default: polygon

TypeAgAxisCaptionOptions

Configuration for the title shown next to the axis.

TypeAgRadiusCrossLineOptions[]

Add cross lines or regions corresponding to data values.

TypeRatio

The ratio of the inner radius of the axis as a proportion of the overall radius.
Used to create an inner circle.

Typeboolean

Reverse the axis scale domain if true.

TypeAgAxisLineOptions

Configuration for the axis line.

TypeAgAxisGridLineOptions

Configuration for the axis grid lines.

TypeAgRadiusAxisLabelOptions

Configuration for the axis labels, shown next to the ticks.

Simple Radial Column

Stacked Radial Column

Customisation

Inner Radius

Category Padding

Axis Label Orientation

Radius Axis Position

API Reference

type*

angleKey*

radiusKey*

columnWidthRatio

maxColumnWidthRatio

label

tooltip

formatter

stroke

strokeWidth

strokeOpacity

lineDash

lineDashOffset

fill

fillOpacity

cursor

highlightStyle

nodeClickRange

showInLegend

listeners

normalizedTo

grouped

stacked

stackGroup

id

data

visible

angleName

radiusName

type*

tick

shape

startAngle

endAngle

crossLines

groupPaddingInner

paddingInner

reverse

line

gridLine

label

type*

nice

min

max

positionAngle

tick

shape

title

crossLines

innerRadiusRatio

reverse

line

gridLine

label