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 React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
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 ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Conversion Drop Off",
},
series: [
{
type: "cone-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 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 React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
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 ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Conversion Drop Off",
},
seriesArea: {
padding: {
left: 20,
right: 20,
},
},
series: [
{
type: "cone-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 Cone Funnel Series, set the direction to horizontal.
{
direction: 'horizontal',
} Customisation Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
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 ChartExample = () => {
const [options, setOptions] = useState<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"],
},
],
});
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: 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.