Angular ChartsFunnel Series

Version 14.2.0

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

app.component.ts

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

@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: "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 Funnel Series, use the funnel series type.

{
    series: [
        {
            type: 'funnel',
            stageKey: 'group',
            valueKey: 'value',
        },
    ],
}

In this configuration:

stageKey defines the stages which are used for the bars of the funnel.
valueKey provides the numerical values which determine the width of each bar.

Horizontal Funnel Copy Link

app.component.ts

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

@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: "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 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.

app.component.ts

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

@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",
      },
      series: [
        {
          type: "funnel",
          stageKey: "group",
          valueKey: "value",
          dropOff: {
            enabled: false,
          },
        },
      ],
    };
  }
}

data.ts

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

main.ts

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

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

bootstrapApplication(AppComponent);

To disable the drop offs, set enabled to false in the dropOff configuration.

{
    dropOff: {
        enabled: false,
    },
}

Customisation Copy Link

app.component.ts

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

@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: "funnel",
          stageKey: "group",
          valueKey: "value",
          fills: ["#5090DC", "#FFA03A", "#459D55", "#34BFE1"],
        },
      ],
    };
  }
}

data.ts

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

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', '#34BFE1'],
}

In this configuration:

The fills for each stage are defined in the fills array.
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.

Labels Copy Link

The values can be displayed inside or outside each stage using the label option, and the stage name can be shown with the stageLabel option.

app.component.ts

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

const initialPlacement: AgFunnelSeriesLabelPlacement = "inside-center";
ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  FunnelSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

@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="inside-center" selected="">inside-center</option>
            <option value="inside-start">inside-start</option>
            <option value="inside-end">inside-end</option>
            <option value="inside-before">inside-before</option>
            <option value="inside-after">inside-after</option>
            <option value="outside-start">outside-start</option>
            <option value="outside-end">outside-end</option>
            <option value="outside-before">outside-before</option>
            <option value="outside-after">outside-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: {
          top: 20,
          bottom: 20,
          left: 60,
          right: 60,
        },
      },
      series: [
        {
          type: "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 AgFunnelSeriesOptions<DataType>).label!.placement =
      value as AgFunnelSeriesLabelPlacement;
    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 AgFunnelSeriesOptions<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 AgFunnelSeriesOptions<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: 'inside-center',
    },
    stageLabel: {
        placement: 'before',
    },
}

In this configuration:

The label is positioned as inside-center. Use the dropdown to see all available placements.
- start and end are above and below the bar when vertical, left and right of it when horizontal.
- before and after are the other two sides, matching stageLabel.placement.
stageLabel.placement positions the stage names on either side of the chart.
On a vertical funnel, before and after are mirrored when RTL Layout is enabled.
Providing placement as an ordered array (e.g. ['inside-center', 'outside-end']) lets a label that does not fit inside its stage fall back to an outside position.

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

Funnel Chart Examples Copy Link

See more Funnel Chart examples in the AG Charts Gallery.

Funnel Chart Example

Customised Funnel Chart Example

API Reference Copy Link

Properties available on the AgFunnelSeriesOptions interface.

type required 'funnel': Configuration for the 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.
highlight AgHighlightOptions: Configuration for highlighting when a series or legend item is hovered over.
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 bars. 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 bars.
fillOpacity Opacity: The opacity of the fill for the bars.
strokeOpacity Opacity: The opacity of the stroke for the bars.
strokeWidth PixelSize: The width in pixels of the stroke for the bars.
spacingRatio Ratio: The size of the gap between the categories as a proportion, between 0 and 1. This value is a fraction of the “step”, which is the interval between the start of a bar and the start of the next bar.
cornerRadius PixelSize default: 0: The corner radius applied to every bar. The chart background shows through the area cut away by the rounded corners.
dropOff AgFunnelSeriesDropOff: Configuration for drop-offs between adjacent bars.
direction 'horizontal' | 'vertical': Bar rendering direction.
crisp boolean: Align bars to whole pixel values to remove anti-aliasing.
label AgFunnelSeriesLabelOptions: Configuration for the labels shown on bars.
stageLabel AgFunnelSeriesStageLabelOptions: Configuration for the stage labels.
shadow AgDropShadowOptions: Configuration for the shadow used behind the series items.
tooltip AgSeriesTooltip: Series-specific tooltip configuration.
itemStyler Styler: Function used to return formatting for individual bars, based on the given parameters.
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 ChartsFunnel Series

Simple Funnel Copy Link

Horizontal Funnel Copy Link

Segmented Funnel Copy Link

Customisation Copy Link

Labels Copy Link

Funnel Chart Examples Copy Link

API Reference Copy Link