Angular ChartsCone Funnel Series

Version 14.2.0

A Cone 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

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      data: getData(),
      title: {
        text: "Conversion Drop Off",
      },
      series: [
        {
          type: "cone-funnel",
          stageKey: "group",
          valueKey: "value",
        },
      ],
    };
  }
}

data.ts

export function getData() {
  return [
    { group: "Page Visit", value: 490 },
    { group: "Enquiry", value: 340 },
    { group: "Quote", value: 300 },
    { group: "Sale", value: 290 },
  ];
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

To create a Cone Funnel Series, use the cone-funnel series type.

{
    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 Copy Link

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      data: getData(),
      title: {
        text: "Conversion Drop Off",
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "cone-funnel",
          stageKey: "group",
          valueKey: "value",
          direction: "horizontal",
        },
      ],
    };
  }
}

data.ts

export function getData() {
  return [
    { group: "Page Visit", value: 490 },
    { group: "Enquiry", value: 340 },
    { group: "Quote", value: 300 },
    { group: "Sale", value: 290 },
  ];
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

To create a horizontal Cone Funnel Series, set the direction to horizontal.

{
    direction: 'horizontal',
}

Customisation Copy Link

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      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"],
        },
      ],
    };
  }
}

data.ts

export function getData() {
  return [
    { group: "Close", value: 4460 },
    { group: "Propose", value: 7260 },
    { group: "Develop", value: 7910 },
    { group: "Qualify", value: 8170 },
  ];
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    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.

Labels Copy Link

The values can be displayed along the dividing line using the label option, and the stage names can be shown with the stageLabel option.

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  AgConeFunnelSeriesLabelPlacement,
  AgConeFunnelSeriesOptions,
  AnimationModule,
  CategoryAxisModule,
  ConeFunnelSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";
import clone from "clone";

const initialPlacement: AgConeFunnelSeriesLabelPlacement = "start-center";
ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  ConeFunnelSeriesModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <label for="placementSelect">Label Placement:</label>
        <select id="placementSelect" (change)="setPlacement($event.target.value)">
            <option value="start-before">start-before</option>
            <option value="start-center" selected="">start-center</option>
            <option value="start-after">start-after</option>
            <option value="middle-before">middle-before</option>
            <option value="middle-center">middle-center</option>
            <option value="middle-after">middle-after</option>
            <option value="end-before">end-before</option>
            <option value="end-center">end-center</option>
            <option value="end-after">end-after</option>
        </select>
        <span class="gap-left">Stage Label Placement:</span>
        <div class="button-group" role="group" aria-label="Stage Label Placement">
            <input type="radio" id="stage-label-before" name="stageLabelPlacement" value="before" checked="" (change)="setStageLabelPlacement($event)">
            <label for="stage-label-before"><code>Before</code></label>
            <input type="radio" id="stage-label-after" name="stageLabelPlacement" value="after" (change)="setStageLabelPlacement($event)">
            <label for="stage-label-after"><code>After</code></label>
        </div>
    </div>
    <div class="controls-row">
        <span>Direction:</span>
        <div class="button-group" role="group" aria-label="Direction">
            <input type="radio" id="direction-vertical" name="direction" value="vertical" checked="" (change)="setDirection($event)">
            <label for="direction-vertical"><code>Vertical</code></label>
            <input type="radio" id="direction-horizontal" name="direction" value="horizontal" (change)="setDirection($event)">
            <label for="direction-horizontal"><code>Horizontal</code></label>
        </div>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      data: getData(),
      title: {
        text: "Conversion Drop Off",
      },
      subtitle: {
        text: initialPlacement,
      },
      animation: {
        enabled: false,
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "cone-funnel",
          stageKey: "group",
          valueKey: "value",
          direction: "vertical",
          label: {
            enabled: true,
            placement: initialPlacement,
          },
          stageLabel: {
            placement: "before",
          },
        },
      ],
    };
  }

  setPlacement = (value: string) => {
    const options = clone(this.options);

    (
      options.series![0] as AgConeFunnelSeriesOptions<DataType>
    ).label!.placement = value as AgConeFunnelSeriesLabelPlacement;
    options.subtitle!.text = value;

    this.options = options;
  };

  setDirection = (event: Event) => {
    const options = clone(this.options);

    const direction = (event.target as HTMLInputElement).value as
      | "vertical"
      | "horizontal";
    options.series = [
      {
        ...(options.series![0] as AgConeFunnelSeriesOptions<DataType>),
        direction,
      },
    ];

    this.options = options;
  };

  setStageLabelPlacement = (event: Event) => {
    const options = clone(this.options);

    const placement = (event.target as HTMLInputElement).value as
      | "before"
      | "after";
    options.series = [
      {
        ...(options.series![0] as AgConeFunnelSeriesOptions<DataType>),
        stageLabel: { placement },
      },
    ];

    this.options = options;
  };
}

data.ts

export interface DataType {
  group: string;
  value: number;
}

export function getData(): DataType[] {
  return [
    { group: "Page Visit", value: 490 },
    { group: "Enquiry", value: 340 },
    { group: "Quote", value: 300 },
    { group: "Sale", value: 290 },
  ];
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    label: {
        enabled: true,
        placement: 'middle-center',
    },
    stageLabel: {
        placement: 'before',
    },
}

In this configuration:

The label defaults to start-center. Use the dropdown to see all available placements.
- start and end are the two sides of the dividing line with middle sitting exactly on it.
- before, center and after position the label along the length of the line.
stageLabel.placement positions the stage names on either side of the chart.
On a vertical cone funnel, before and after are mirrored when RTL Layout is enabled.

See Series Labels for the full set of label placement and collision avoidance options, and the API Reference for additional customisation options.

Cone Funnel Chart Examples Copy Link

See more Cone Funnel Chart examples in the AG Charts Gallery.

Cone Funnel Chart Example

API Reference Copy Link

Properties available on the AgConeFunnelSeriesOptions interface.

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 default: 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 InteractionRange: Range from a node that a click triggers the listener.
listeners AgSeriesListeners: A map of event names to event listeners.
fills AgColorType[]: 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.
stageLabel AgConeFunnelSeriesStageLabelOptions: Configuration for the stage labels.
tooltip AgSeriesTooltip: Series-specific tooltip configuration.
highlight AgHighlightOptions: Configuration for highlighting when a series or legend item is hovered over.
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.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

Angular ChartsCone Funnel Series

Simple Cone Funnel Copy Link

Horizontal Cone Funnel Copy Link

Customisation Copy Link

Labels Copy Link

Cone Funnel Chart Examples Copy Link

API Reference Copy Link