Vue ChartsRadial Bar Series

Enterprise

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

Simple Radial Bar Copy Link

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 Copy Link

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 Copy Link

Inner Radius Copy Link

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 Copy Link

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 Copy Link

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 Copy Link

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, //equivalent to -90
        },
    ],
}

Getting started

Core features

Specialised Charts

Series

Gauges