A Radial Column Series, also called Circular Column, visualises data through rectangular columns arranged along a polar axis.
Simple Radial Column Copy Link
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
AngleCategoryAxisModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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 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:
angleKeyis set to 'quarter', which is the shared category for the Angle Axis.radiusKeyspecifies the numerical datasets, 'software', 'hardware' and 'services', for the Radius Axis.radiusNamelabels each series, such as 'Software', 'Hardware' and 'Services'.
Stacked Radial Column Copy Link
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.
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
AngleCategoryAxisModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
series: [
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "software",
radiusName: "Software",
stacked: true,
},
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "hardware",
radiusName: "Hardware",
stacked: true,
},
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "services",
radiusName: "Services",
stacked: true,
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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 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 Copy Link
Inner Radius Copy Link
The inner radius can be used to create a 'donut' effect.
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleCategoryAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
axes: {
angle: {
type: "angle-category",
},
radius: {
type: "radius-number",
innerRadiusRatio: 0.2,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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 Number Axis.
{
axes: {
angle: { type: 'angle-category' },
radius: { 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 Copy Link
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleCategoryAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
series: [
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "software",
radiusName: "Software",
grouped: true,
},
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "hardware",
radiusName: "Hardware",
grouped: true,
},
{
type: "radial-column",
angleKey: "quarter",
radiusKey: "services",
radiusName: "Services",
grouped: true,
},
],
axes: {
angle: {
type: "angle-category",
groupPaddingInner: 0.5,
paddingInner: 0.5,
},
radius: {
type: "radius-number",
innerRadiusRatio: 0.2,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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 Angle Axis:
paddingInner: Gap between column groups, ranges from0(no gap) to1(maximum spacing).groupPaddingInner: Spacing within a group, ranges from0(columns touching) to1(widest gap).
{
axes: {
angle: { type: 'angle-category', groupPaddingInner: 0.5, paddingInner: 0.5 },
radius: { type: 'radius-number', innerRadiusRatio: 0.2 },
},
} Axis Label Orientation Copy Link
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleCategoryAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
axes: {
angle: {
type: "angle-category",
label: {
orientation: "parallel",
},
},
radius: {
type: "radius-number",
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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-category',
label: {
orientation: 'parallel',
},
},
radius: { type: 'radius-number' },
},
} Radius Axis Position Copy Link
import {
AgChartOptions,
AgCharts,
AngleCategoryAxisModule,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AngleCategoryAxisModule,
AnimationModule,
CrosshairModule,
LegendModule,
RadialColumnSeriesModule,
RadiusNumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue by Product Category",
},
subtitle: {
text: "Millions USD",
},
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",
},
],
axes: {
angle: {
type: "angle-category",
},
radius: {
type: "radius-number",
innerRadiusRatio: 0.25,
positionAngle: 90,
label: {
rotation: -90,
},
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
quarter: `Q1'22`,
software: 4.35,
hardware: 2.14,
services: 3.91,
},
{
quarter: `Q2'22`,
software: 4.28,
hardware: 3.13,
services: 3.04,
},
{
quarter: `Q3'22`,
software: 4.14,
hardware: 3.34,
services: 3.18,
},
{
quarter: `Q4'22`,
software: 3.48,
hardware: 3.56,
services: 3.61,
},
{
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,
},
];
}
Customise the Radius Axis Line position via positionAngle and Axis Label rotation using label.rotation:
{
axes: {
angle: { type: 'angle-category' },
radius: {
type: 'radius-number',
positionAngle: 90,
label: {
rotation: -90,
},
},
},
}