A Radial Bar Series, also called Circular Bar, visualises data through rectangular bars arranged along a polar axis.
Simple Radial Bar Copy Link
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
AngleNumberAxisModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
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:
radiusKeyis set to 'quarter', which is the shared category for the Radius Axis.angleKeyspecifies the numerical datasets, 'software', 'hardware' and 'services', for the Angle Axis.angleNamelabels 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.
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
AngleNumberAxisModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
series: [
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "software",
angleName: "Software",
stacked: true,
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "hardware",
angleName: "Hardware",
stacked: true,
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "services",
angleName: "Services",
stacked: true,
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
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.
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleNumberAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
axes: {
angle: {
type: "angle-number",
},
radius: {
type: "radius-category",
innerRadiusRatio: 0.3,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
This is changed via the innerRadiusRatio option on the Radius Category Axis.
{
axes: {
angle: { type: 'angle-number' },
radius: { 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
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleNumberAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
series: [
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "software",
angleName: "Software",
grouped: true,
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "hardware",
angleName: "Hardware",
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "services",
angleName: "Services",
},
],
axes: {
angle: {
type: "angle-number",
},
radius: {
type: "radius-category",
groupPaddingInner: 0.5,
paddingInner: 0.5,
paddingOuter: 0.25,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
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: {
angle: { type: 'angle-number', groupPaddingInner: 0.5, paddingInner: 0.5 },
radius: { type: 'radius-category', groupPaddingInner: 0.5, paddingInner: 0.5, paddingOuter: 0.25 },
},
} Axis Label Orientation Copy Link
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleNumberAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
series: [
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "software",
angleName: "Software",
grouped: true,
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "hardware",
angleName: "Hardware",
},
{
type: "radial-bar",
radiusKey: "quarter",
angleKey: "services",
angleName: "Services",
},
],
axes: {
angle: {
type: "angle-number",
label: {
orientation: "parallel",
},
},
radius: {
type: "radius-category",
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
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: {
angle: {
type: 'angle-number',
label: {
orientation: 'parallel',
},
},
radius: { type: 'radius-category' },
},
} Axis Angles Copy Link
import {
AgChartOptions,
AgCharts,
AngleNumberAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleNumberAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialBarSeriesModule,
RadiusCategoryAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
axes: {
angle: {
type: "angle-number",
startAngle: -90,
endAngle: 90,
},
radius: {
type: "radius-category",
positionAngle: 270,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'23`,
software: 3.35,
hardware: 3.14,
services: 3.91,
},
{
quarter: `Q2'23`,
software: 3.28,
hardware: 3.13,
services: 3.54,
},
{
quarter: `Q3'23`,
software: 3.14,
hardware: 2.84,
services: 3.18,
},
{
quarter: `Q4'23`,
software: 2.48,
hardware: 2.46,
services: 3.21,
},
];
}
To change Angle Axis circumference, use the startAngle and endAngle properties. To change the Radius Axis start angle, use positionAngle property.
{
axes: {
angle: {
type: 'angle-number',
startAngle: -90,
endAngle: 90,
},
radius: {
type: 'radius-category',
positionAngle: 270, //equivalent to -90
},
},
} Radial Bar Chart Examples Copy Link
See more Radial Bar Chart examples in the AG Charts Gallery.
API Reference Copy Link
Properties available on the AgRadialBarSeriesOptions interface.
- type required
'radial-bar' - Configuration for Radial Bar Series.
- angleKey required
DatumKey - The key to use to retrieve angle values from the data.
- radiusKey required
DatumKey - The key to use to retrieve radius values from the data.
- normalizedTo
number - The number to normalise the bar stacks to. Has no effect unless series are stacked.
- grouped
boolean - Whether to group together (adjacently) separate sectors.
- stacked
boolean - An option indicating if the sectors should be stacked.
- stackGroup
string - An ID to be used to group stacked items.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- angleName
string - A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
- radiusName
string - A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
- legendItemName
string - The text to display in the legend for this series. If supplied, matching items with the same value will be toggled together.
- label
AgChartLabelOptions - Configuration for the labels shown on top of data points.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- styler
Styler - Function used to return formatting for entire series, based on the given parameters.
- itemStyler
Styler - A styler function for adjusting the styling of the radial columns.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- cornerRadius
PixelSize - Apply rounded corners to each bar.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- lineDash
PixelSize[] - An array specifying the length in pixels of alternating dashes and gaps.
- lineDashOffset
PixelSize - The initial offset of the dashed line in pixels.
Properties available on the AgRadialBarSeriesOptions interface.
- type required
'radial-bar' - Configuration for Radial Bar Series.
- angleKey required
DatumKey - The key to use to retrieve angle values from the data.
- radiusKey required
DatumKey - The key to use to retrieve radius values from the data.
- normalizedTo
number - The number to normalise the bar stacks to. Has no effect unless series are stacked.
- grouped
boolean - Whether to group together (adjacently) separate sectors.
- stacked
boolean - An option indicating if the sectors should be stacked.
- stackGroup
string - An ID to be used to group stacked items.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- showInLegend
boolean - Whether to include the series in the legend.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- angleName
string - A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
- radiusName
string - A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
- legendItemName
string - The text to display in the legend for this series. If supplied, matching items with the same value will be toggled together.
- label
AgChartLabelOptions - Configuration for the labels shown on top of data points.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- styler
Styler - Function used to return formatting for entire series, based on the given parameters.
- itemStyler
Styler - A styler function for adjusting the styling of the radial columns.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- cornerRadius
PixelSize - Apply rounded corners to each bar.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- lineDash
PixelSize[] - An array specifying the length in pixels of alternating dashes and gaps.
- lineDashOffset
PixelSize - The initial offset of the dashed line in pixels.
Properties available on the AgAngleNumberAxisOptions interface.
- type
'angle-number' - Axis type identifier.
- startAngle
Degree - Angle in degrees to start ticks positioning from.
- endAngle
Degree - Angle in degrees to end ticks positioning at. It should be greater than `startAngle`.
- crossLines
AgAngleCrossLineOptions[] - Add cross lines or regions corresponding to data values.
- context
ContextDefault - Context object to use in callbacks.
- reverse
boolean - Reverse the axis scale domain if `true`.
- line
AgAxisLineOptions - Configuration for the axis line.
- gridLine
AgAxisGridLineOptions - Configuration for the axis grid lines.
- label
AgAngleAxisFormattableLabelOptions - Configuration for the axis labels, shown next to the ticks.
- tick
AgAxisBaseTickOptions - Configuration for the axis ticks.
- nice
boolean - If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
- interval
AgAxisContinuousIntervalOptions - Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
- min
AgNumericValue - The min value for the axis domain.
- max
AgNumericValue - The max value for the axis domain.
- preferredMin
AgNumericValue - The min value for the axis, unless extended by the series data or `nice` option.
- preferredMax
AgNumericValue - The max value for the axis, unless extended by the series data or `nice` option.
Properties available on the AgAngleNumberAxisOptions interface.
- type
'angle-number' - Axis type identifier.
- startAngle
Degree - Angle in degrees to start ticks positioning from.
- endAngle
Degree - Angle in degrees to end ticks positioning at. It should be greater than `startAngle`.
- crossLines
AgAngleCrossLineOptions[] - Add cross lines or regions corresponding to data values.
- context
ContextDefault - Context object to use in callbacks.
- reverse
boolean - Reverse the axis scale domain if `true`.
- line
AgAxisLineOptions - Configuration for the axis line.
- gridLine
AgAxisGridLineOptions - Configuration for the axis grid lines.
- label
AgAngleAxisFormattableLabelOptions - Configuration for the axis labels, shown next to the ticks.
- tick
AgAxisBaseTickOptions - Configuration for the axis ticks.
- nice
boolean - If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
- interval
AgAxisContinuousIntervalOptions - Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
- min
AgNumericValue - The min value for the axis domain.
- max
AgNumericValue - The max value for the axis domain.
- preferredMin
AgNumericValue - The min value for the axis, unless extended by the series data or `nice` option.
- preferredMax
AgNumericValue - The max value for the axis, unless extended by the series data or `nice` option.
Properties available on the AgRadiusCategoryAxisOptions interface.
- type
'radius-category' - Axis type identifier.
- positionAngle
Degree - The rotation angle of axis line and labels in degrees.
- title
AgAxisCaptionOptions - Configuration for the title shown next to the axis.
- crossLines
AgRadiusCrossLineOptions[] - Add cross lines or regions corresponding to data values.
- innerRadiusRatio
Ratio - The ratio of the inner radius of the axis as a proportion of the overall radius. Used to create an inner circle.
- groupPaddingInner
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the items within a single group along the angle axis.
- paddingInner
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis.
- paddingOuter
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis.
- context
ContextDefault - Context object to use in callbacks.
- reverse
boolean - Reverse the axis scale domain if `true`.
- line
AgAxisLineOptions - Configuration for the axis line.
- gridLine
AgAxisGridLineOptions - Configuration for the axis grid lines.
- label
AgRadiusAxisLabelOptions - Configuration for the axis labels, shown next to the ticks.
- tick
AgAxisBaseTickOptions - Configuration for the axis ticks.
- interval
AgAxisBaseIntervalOptions - Configuration for the axis ticks interval.
Properties available on the AgRadiusCategoryAxisOptions interface.
- type
'radius-category' - Axis type identifier.
- positionAngle
Degree - The rotation angle of axis line and labels in degrees.
- title
AgAxisCaptionOptions - Configuration for the title shown next to the axis.
- crossLines
AgRadiusCrossLineOptions[] - Add cross lines or regions corresponding to data values.
- innerRadiusRatio
Ratio - The ratio of the inner radius of the axis as a proportion of the overall radius. Used to create an inner circle.
- groupPaddingInner
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the items within a single group along the angle axis.
- paddingInner
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis.
- paddingOuter
Ratio - This property is for grouped polar series plotted on a radius category axis. It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis.
- context
ContextDefault - Context object to use in callbacks.
- reverse
boolean - Reverse the axis scale domain if `true`.
- line
AgAxisLineOptions - Configuration for the axis line.
- gridLine
AgAxisGridLineOptions - Configuration for the axis grid lines.
- label
AgRadiusAxisLabelOptions - Configuration for the axis labels, shown next to the ticks.
- tick
AgAxisBaseTickOptions - Configuration for the axis ticks.
- interval
AgAxisBaseIntervalOptions - Configuration for the axis ticks interval.