Vue 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,
        },
    },
],

Getting started

Core features

Specialised Charts

Series

Gauges