A Funnel Series illustrates how a value changes during a process, with a line representing the value at each stage and filled areas denoting the change between them.
Simple Cone Funnel Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Conversion Drop Off",
},
series: [
{
type: "cone-funnel",
stageKey: "group",
valueKey: "value",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Page Visit", value: 490 },
{ group: "Enquiry", value: 340 },
{ group: "Quote", value: 300 },
{ group: "Sale", value: 290 },
];
}
To create a Cone Funnel Series, use the cone-funnel series type.
{
series: [
{
type: 'cone-funnel',
stageKey: 'group',
valueKey: 'value',
},
],
}In this configuration:
stageKeydefines the stages which are used for the lines of the cone funnel.valueKeyprovides the numerical values which determine the width of line.
Horizontal Cone Funnel Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Conversion Drop Off",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "cone-funnel",
stageKey: "group",
valueKey: "value",
direction: "horizontal",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Page Visit", value: 490 },
{ group: "Enquiry", value: 340 },
{ group: "Quote", value: 300 },
{ group: "Sale", value: 290 },
];
}
To create a horizontal Cone Funnel Series, set the direction to horizontal.
{
direction: 'horizontal',
} Customisation Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
ConeFunnelSeriesModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "cone-funnel",
stageKey: "group",
valueKey: "value",
fills: ["#5090DC", "#FFA03A", "#459D55"],
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ group: "Close", value: 4460 },
{ group: "Propose", value: 7260 },
{ group: "Develop", value: 7910 },
{ group: "Qualify", value: 8170 },
];
}
{
fills: ['#5090DC', '#FFA03A', '#459D55'],
}In this configuration:
- The fills for each drop off area are defined in the
fillsarray. - The Cone Funnel series is reversed by providing the data items in the reverse order.