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 from0
(no gap) to1
(maximum spacing).groupPaddingInner
: Spacing within a group, ranges from0
(bars touching) to1
(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: 270,
endAngle: 450,
},
{
type: 'radius-category',
positionAngle: 270,
},
],