--- title: "Cone Funnel Series" framework: javascript version: "14.1.0" --- # Cone Funnel Series 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 #### Cone Funnel Chart ```ts 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); ``` [Live example: Cone Funnel Chart](https://www.ag-grid.com/charts/typescript/cone-funnel-series/examples/simple-cone-funnel) To create a Cone Funnel Series, use the `cone-funnel` series type. ```js { series: [ { type: 'cone-funnel', stageKey: 'group', valueKey: 'value', }, ], } ``` In this configuration: - `stageKey` defines the stages which are used for the lines of the cone funnel. - `valueKey` provides the numerical values which determine the width of line. ## Horizontal Cone Funnel #### Horizontal Cone Funnel Chart ```ts 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); ``` [Live example: Horizontal Cone Funnel Chart](https://www.ag-grid.com/charts/typescript/cone-funnel-series/examples/horizontal-cone-funnel) To create a horizontal Cone Funnel Series, set the `direction` to `horizontal`. ```js { direction: 'horizontal', } ``` ### Customisation #### Cone Funnel Fills ```ts 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); ``` [Live example: Cone Funnel Fills](https://www.ag-grid.com/charts/typescript/cone-funnel-series/examples/cone-funnel-fills) ```js { fills: ['#5090DC', '#FFA03A', '#459D55'], } ``` In this configuration: - The fills for each drop off area are defined in the `fills` array. - The Cone Funnel series is reversed by providing the data items in the reverse order. ## API Reference #### Cone Funnel Series | Property | Type | Default | Description | | --- | --- | --- | --- | | type (required) | 'cone-funnel' | | Configuration for the Cone Funnel Series. | | stageKey (required) | DatumKey | | The key to use to retrieve stage values from the data. | | valueKey (required) | DatumKey | | The key to use to retrieve values from the data. | | id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. | | context | ContextDefault | | Context object to use in callbacks. | | data | DatumDefault[] | | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. | | visible | boolean | | Whether to display the series. | | cursor | string | | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. | | nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a node that a click triggers the listener. | | listeners | AgSeriesListeners | | A map of event names to event listeners. | | listeners.seriesNodeClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. | | listeners.seriesNodeDoubleClick | Listener | | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. | | fills | Array | | The colours to cycle through for the fills of the drop-offs. An array of colour strings, or fill objects for gradients, patterns, or images. | | strokes | CssColor[] | | The colours to cycle through for the strokes of the drop-offs. | | fillOpacity | Opacity | | The opacity of the fill for the drop-offs. | | strokeOpacity | Opacity | | The opacity of the stroke for the drop-offs. | | strokeWidth | PixelSize | | The width in pixels of the stroke for the drop-offs. | | direction | 'horizontal' \| 'vertical' | | Bar rendering direction. | | label | AgConeFunnelSeriesLabelOptions | | Configuration for the labels shown on between drop-offs. | | label.spacing | PixelSize | | Spacing between label and the associated divider. | | label.placement | 'before' \| 'middle' \| 'after' | | The placement of the label in relation to the divider between drop-offs. | | label.formatter | RichFormatter | | A custom formatting function used to convert data values into text for display by labels. | | label.format | string | | Format string used when rendering labels. | | label.itemStyler | Styler | | Function used to style individual datum labels. | | label.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for text elements. A colour string, or a theme-colour reference object. | | label.fontSize | FontSize | | The size of the font in pixels for text elements. | | label.fontFamily | FontFamily | | The font family for text elements. | | label.fontStyle | FontStyle | | The style to use for text elements. | | label.fontWeight | FontWeight | | The font weight to use for text elements. | | label.border | BorderOptions | | Stroke options for the box border. | | label.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | label.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | label.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | label.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | label.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | label.fillOpacity | Opacity | | The opacity of the fill colour. | | stageLabel | AgConeFunnelSeriesStageLabelOptions | | Configuration for the stage labels. | | stageLabel.placement | 'before' \| 'after' | | Placement of the label in relation to the chart. | | stageLabel.format | string | | Format string used when rendering labels. | | stageLabel.enabled | boolean | | Set to `false` to hide the axis labels. | | stageLabel.rotation | Degree | | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. | | stageLabel.avoidCollisions | boolean | | Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide. | | stageLabel.minSpacing | PixelSize | | Minimum gap in pixels between the axis labels before being removed to avoid collisions. | | stageLabel.formatter | RichFormatter | | Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` | | stageLabel.itemStyler | Styler | | Function used to style axis labels. | | stageLabel.fontStyle | FontStyle | | The font style to use for the labels. | | stageLabel.fontWeight | FontWeight | | The font weight to use for the labels. | | stageLabel.fontSize | FontSize | | The font size in pixels to use for the labels. | | stageLabel.fontFamily | FontFamily \| GoogleFontFamily \| Array | | The font family to use for the labels. A single family name, or an array of names used as fallbacks. | | stageLabel.spacing | PixelSize | | Spacing in pixels between the axis label and the tick. | | stageLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour to use for the labels. A colour string, or a theme-colour reference object. | | stageLabel.border | BorderOptions | | Stroke options for the box border. | | stageLabel.border.enabled | boolean | | Whether the associated elements and properties should be used in the chart. | | stageLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | stageLabel.border.strokeWidth | PixelSize | | The width of the stroke in pixels. | | stageLabel.border.strokeOpacity | Opacity | | The opacity of the stroke colour. | | stageLabel.cornerRadius | PixelSize | | Apply rounded corners to the label box. | | stageLabel.padding | PixelSize \| PaddingOptions | | Distance between the label text and the border. A number applies uniform padding; an object sets each side. | | stageLabel.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill | | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. | | stageLabel.fillOpacity | Opacity | | The opacity of the fill colour. | | tooltip | AgSeriesTooltip | | Series-specific tooltip configuration. | | tooltip.enabled | boolean | | Whether to show tooltips when the series are hovered over. | | tooltip.showArrow | boolean | | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. | | tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' | | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. | | tooltip.position | AgTooltipPositionOptions | | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. | | tooltip.position.anchorTo | AgTooltipAnchorTo | | The element or point to position the tooltip relative to. | | tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] | | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. | | tooltip.position.xOffset | PixelSize | | The horizontal offset in pixels for the position of the tooltip. | | tooltip.position.yOffset | PixelSize | | The vertical offset in pixels for the position of the tooltip. | | tooltip.position.offset | PixelSize | | The distance in pixels between the tooltip and its anchor point, applied in the placement direction. Default: `12` (`0` when `anchorTo` is `'chart'`). | | tooltip.interaction | AgSeriesTooltipInteraction | | Configuration for tooltip interaction. | | tooltip.interaction.enabled (required) | boolean | | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text | | tooltip.renderer | Renderer | | Function used to create the content for tooltips. | | highlight | AgHighlightOptions | | Configuration for highlighting when a series or legend item is hovered over. | | highlight.enabled | boolean | | Set to `false` to disable highlighting. | | highlight.highlightedItem | AgBaseHighlightStyleOptions | | Options for the highlighted item. | | highlight.highlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.highlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.highlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.highlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.highlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | highlight.unhighlightedItem | AgBaseHighlightStyleOptions | | Options for the un-highlighted items when there is an active highlight. | | highlight.unhighlightedItem.opacity | Opacity | | The opacity of the whole series (line, fill, labels and markers, if any) | | highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor | | The colour for the stroke. | | highlight.unhighlightedItem.strokeWidth | PixelSize | | The width of the stroke in pixels. | | highlight.unhighlightedItem.strokeOpacity | Opacity | | The opacity of the stroke colour. | | highlight.unhighlightedItem.lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | highlight.unhighlightedItem.lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. | | lineDash | PixelSize[] | | An array specifying the length in pixels of alternating dashes and gaps. | | lineDashOffset | PixelSize | | The initial offset of the dashed line in pixels. |