Javascript ChartsRadial Column Series

javascript logo
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