All Components

Funnel

Funnel Charts are Freeform charts which display a single series of data in progressively decreasing or increasing proportions that are organized in segments, where each segment represents the value for the particular item from the series.

The values of the items can also influence the height and the shape of the corresponding segments. The Funnel Charts are useful for representing stages in a sales process and for displaying the amount of potential revenues from each stage. They are also suitable for identifying potential problem areas in the sales processes of an organization and for displaying several values.

Basic Usage

The following example demonstrates the Funnel Chart in action.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [`
    kendo-chart {
      margin: 0 auto;
      width: 300px;
    }
  `],
  template: `
    <kendo-chart>
      <kendo-chart-title text="Sales funnel"></kendo-chart-title>
      <kendo-chart-series>
        <kendo-chart-series-item type="funnel" [data]="model"
                                 field="count" categoryField="stat" colorField="color">
          <kendo-chart-series-item-labels background="none" color="white" format="N0">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-category="category">
            {{ category }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public model = [{
    stat: 'Impressions ',
    count: 434823,
    color: '#0e5a7e'
  }, {
    stat: 'Clicks',
    count: 356854,
    color: '#166f99'
  }, {
    stat: 'Unique Visitors',
    count: 280022,
    color: '#2185b4'
  }, {
    stat: 'Downloads',
    count: 190374,
    color: '#319fd2'
  }, {
    stat: 'Purchases',
    count: 120392,
    color: '#3eaee2'
  }];
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

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

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Controlling the Funnel Shape

You can influence the form of the funnel by setting the "neck ratio". The neck ratio is the ratio between the width of the base and the width of the funnel top. The default value of the neck ratio is 0.3. This means that the width of the base is 30% of the width of the top. If you set the neck ratio to values that are larger than 1, then the funnel will reverse and turn into a pyramid.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [`
    kendo-chart {
      margin: 0 auto;
      width: 300px;
    }
  `],
  template: `
    <div class="example-config">
      <div>
        <label for="neckRatio">Neck ratio ({{ neckRatio | number:'1.2-2' }})</label>
      </div>
      <kendo-slider
          id="neckRatio"
          [min]="0"
          [max]="5"
          [smallStep]="0.1"
          [(ngModel)]="neckRatio"
          [showButtons]="false"
          tickPlacement="none">
      </kendo-slider>
    </div>

    <kendo-chart>
      <kendo-chart-title text="Sales funnel"></kendo-chart-title>
      <kendo-chart-series>
        <kendo-chart-series-item type="funnel" [data]="model"
                                 field="count" categoryField="stat" colorField="color"
                                 [neckRatio]="neckRatio">
          <kendo-chart-series-item-labels background="none" color="white" format="N0">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-category="category">
            {{ category }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public neckRatio = 0.3;

  public model = [{
    stat: 'Impressions ',
    count: 434823,
    color: '#0e5a7e'
  }, {
    stat: 'Clicks',
    count: 356854,
    color: '#166f99'
  }, {
    stat: 'Unique Visitors',
    count: 280022,
    color: '#2185b4'
  }, {
    stat: 'Downloads',
    count: 190374,
    color: '#319fd2'
  }, {
    stat: 'Purchases',
    count: 120392,
    color: '#3eaee2'
  }];
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';
import { SliderModule } from '@progress/kendo-angular-inputs';

import 'hammerjs';

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

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule, SliderModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Dynamic Slope and Height

By default, the slope and height of the funnel segments is linear. You can change the rendering of the slope and height based on the value of the specific segment.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [`
    kendo-chart {
      margin: 0 auto;
      width: 300px;
    }
  `],
  template: `
    <div class="example-config">
      <input id="ds" type="checkbox" [(ngModel)]="dynamicSlope">
      <label for="ds">Dynamic Slope</label>

      <input id="dh" type="checkbox" [(ngModel)]="dynamicHeight">
      <label for="dh">Dynamic Height</label>
    </div>

    <kendo-chart>
      <kendo-chart-title text="Sales funnel"></kendo-chart-title>
      <kendo-chart-series>
        <kendo-chart-series-item type="funnel" [data]="model"
                                 field="count" categoryField="stat" colorField="color"
                                 [dynamicSlope]="dynamicSlope" [dynamicHeight]="dynamicHeight">
          <kendo-chart-series-item-labels background="none" color="white" format="N0">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-category="category">
            {{ category }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public dynamicSlope = false;
  public dynamicHeight = false;

  public model = [{
    stat: 'Impressions ',
    count: 434823,
    color: '#0e5a7e'
  }, {
    stat: 'Clicks',
    count: 356854,
    color: '#166f99'
  }, {
    stat: 'Unique Visitors',
    count: 280022,
    color: '#2185b4'
  }, {
    stat: 'Downloads',
    count: 190374,
    color: '#319fd2'
  }, {
    stat: 'Purchases',
    count: 120392,
    color: '#3eaee2'
  }];
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

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

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article