A Pyramid Series is a triangular shaped visualisation that uses the height of each segment to represent its value as a proportion of the whole.
Simple Pyramid Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
LegendModule,
ModuleRegistry,
PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
LegendModule,
PyramidSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
series: [
{
type: "pyramid",
stageKey: "group",
valueKey: "value",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
To create a Pyramid Series, use the pyramid series type.
{
series: [
{
type: 'pyramid',
stageKey: 'group',
valueKey: 'value',
},
],
}In this configuration:
stageKeydefines the categories, each of which is mapped to segments in the pyramid.valueKeyprovides the numerical values, determining the height of each segment.
Horizontal Pyramid Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
ModuleRegistry,
PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
PyramidSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "pyramid",
stageKey: "group",
valueKey: "value",
direction: "horizontal",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
To create a horizontal Pyramid Series, set the direction to horizontal.
{
direction: 'horizontal',
} Reverse Pyramid Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
LegendModule,
ModuleRegistry,
PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
LegendModule,
PyramidSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "pyramid",
stageKey: "group",
valueKey: "value",
reverse: true,
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
To reverse a Pyramid Series, set reverse to true.
{
reverse: true,
} Customisation Copy Link
Fills Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
LegendModule,
ModuleRegistry,
PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
LegendModule,
PyramidSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "pyramid",
stageKey: "group",
valueKey: "value",
fills: ["#5C6BC0", "#3F51B5", "#303F9F", "#1A237E"],
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
The colours in a Pyramid Series can be customised with the fills property.
{
fills: ['#5C6BC0', '#3F51B5', '#303F9F', '#1A237E'],
} Shape Copy Link
import {
AgCharts,
AgPyramidSeriesOptions,
AgStandaloneChartOptions,
AnimationModule,
ContextMenuModule,
LegendModule,
ModuleRegistry,
PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
LegendModule,
PyramidSeriesModule,
ContextMenuModule,
]);
const options: AgStandaloneChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "pyramid",
stageKey: "group",
valueKey: "value",
aspectRatio: 3 / 2,
label: {
enabled: false,
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function setDirection(direction: "horizontal" | "vertical") {
(options.series![0] as AgPyramidSeriesOptions).direction = direction;
chart.update(options);
}
function setAspectRatio(aspectRatio: number) {
(options.series![0] as AgPyramidSeriesOptions).aspectRatio = aspectRatio;
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).setDirection = setDirection;
(<any>window).setAspectRatio = setAspectRatio;
}
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
The shape of the triangle can be set using the aspectRatio property.
{
aspectRatio: 3 / 2,
}In this configuration:
aspectRatiois set such that width will grow3pxfor every2pxof height.