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 from0
(no gap) to1
(maximum spacing).groupPaddingInner
: Spacing within a group, ranges from0
(columns touching) to1
(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.
The ratio used to calculate the column width based on the circumference and padding between items.
Prevents columns from becoming too wide. This value is relative to the diameter of the polar chart.
Configuration for marker and series highlighting when a series or legend item is hovered over.
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.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
Properties available on the AgAngleCategoryAxisOptions
interface.
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.
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.
Properties available on the AgRadiusNumberAxisOptions
interface.
The ratio of the inner radius of the axis as a proportion of the overall radius.
Used to create an inner circle.