A Funnel Series illustrates how a value changes during a process, with bar widths representing the value at each stage and drop-offs denoting the change between them.
Simple Funnel Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Conversion Drop Off",
},
series: [
{
type: "funnel",
stageKey: "group",
valueKey: "value",
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ group: "Page Visit", value: 490 },
{ group: "Enquiry", value: 340 },
{ group: "Quote", value: 300 },
{ group: "Sale", value: 290 },
];
}
To create a Funnel Series, use the funnel series type.
{
series: [
{
type: 'funnel',
stageKey: 'group',
valueKey: 'value',
},
],
}In this configuration:
stageKeydefines the stages which are used for the bars of the funnel.valueKeyprovides the numerical values which determine the width of each bar.
Horizontal Funnel Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Conversion Drop Off",
},
series: [
{
type: "funnel",
stageKey: "group",
valueKey: "value",
direction: "horizontal",
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
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 Funnel Series, set the direction to horizontal.
{
direction: 'horizontal',
} Segmented Funnel Copy Link
A segmented funnel does not draw the drop offs between the stages.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
series: [
{
type: "funnel",
stageKey: "group",
valueKey: "value",
dropOff: {
enabled: false,
},
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ group: "Qualify", value: 7910 },
{ group: "Develop", value: 8170 },
{ group: "Propose", value: 7260 },
{ group: "Close", value: 4460 },
];
}
To disable the drop offs, set enabled to false in the dropOff configuration.
{
dropOff: {
enabled: false,
},
} Customisation Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
FunnelSeriesModule,
LegendModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Revenue Open by Sales Stage",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "funnel",
stageKey: "group",
valueKey: "value",
fills: ["#5090DC", "#FFA03A", "#459D55", "#34BFE1"],
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ group: "Close", value: 4460 },
{ group: "Propose", value: 7260 },
{ group: "Develop", value: 7910 },
{ group: "Qualify", value: 9170 },
];
}
{
fills: ['#5090DC', '#FFA03A', '#459D55', '#34BFE1'],
}In this configuration:
- The fills for each stage are defined in the
fillsarray. - The drop offs use an opacity of the same fills. This can be changed in the drop off options.
- The Funnel Series is reversed by providing the data items in the reverse order.