Angular Funnel Chart with Index Labels

Download Angular Chart Samples

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>

Chart Customizations

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.

Note   For step by step instructions, follow our Angular Integration Tutorial