Vue ChartsRadial Bar Series

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

Simple Radial Bar

To create a Radial Bar Series, use the radial-bar series type.

series: [
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: 'software', angleName: 'Software' },
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: 'hardware', angleName: 'Hardware' },
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: 'services', angleName: 'Services' },
],

In this configuration:

• radiusKey is set to 'quarter', which is the shared category for the Radius Axis.
• angleKey specifies the numerical datasets, 'software', 'hardware' and 'services', for the Angle Axis.
• angleName labels each series, such as 'Software', 'Hardware' and 'Services'.

Stacked Radial Bar

In a Stacked Radial Bar chart, bars are horizontally stacked within each category to represent a cumulative total, allowing analysis of both single data points and overall category totals.

To stack bars in a Radial Bar Series, enable the stacked series property.

series: [
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: 'software', stacked: true },
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: 'hardware', stacked: true },
    { type: 'radial-bar', radiusKey: 'quarter', angleKey: '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 Category Axis.

axes: [
    { type: 'angle-number' },
    { type: 'radius-category' innerRadiusRatio: 0.3 },
],

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 Radius Axis:

• paddingInner: Gap between bar groups, ranges from 0 (no gap) to 1 (maximum spacing).
• groupPaddingInner: Spacing within a group, ranges from 0 (bars touching) to 1 (widest gap).

axes: [
    { type: 'angle-number', groupPaddingInner: 0.5, paddingInner: 0.5 },
    { type: 'radius-category', groupPaddingInner: 0.5, paddingInner: 0.5, paddingOuter: 0.25 },
],

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-number',
        label: {
            orientation: 'parallel',
        },
    },
    { type: 'radius-category' },
],

Axis Angles

To change Angle Axis circumference, use the startAngle and endAngle properties. To change the Radius Axis start angle, use positionAngle property.

axes: [
    {
        type: 'angle-number',
        startAngle: -90,
        endAngle: 90,
    },
    {
        type: 'radius-category',
        positionAngle: 270,
    },
],

API Reference