Example shows Angular Funnel Chart with Index Labels for each stage
/* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { animationEnabled: true, title: { text: "Email Conversation Rate" }, data: [{ type: "funnel", indexLabel: "{name}: {y}", valueRepresents: "area", dataPoints: [ { y: 10000, name: "Recieved Email" }, { y: 2000, name: "Opened Email" }, { y: 1500, name: "Visited Website" }, { y: 500, name: "Added Product to Cart" }, { y: 250, name: "Completed Purchase" } ] }] } }
/* app.module.ts */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component'; var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart; @NgModule({ declarations: [ AppComponent, CanvasJSChart ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
Neck of the funnel can be customized using neckHeight and neckWidth properties. You can also reverse the funnel by setting the reversed property to true.