Angular Funnel Chart without Neck

Download Angular Chart Samples

Example shows Angular Funnel Chart without neck. Removing the neck in funnel chart makes it look like reversed pyramid chart.

/* app.component.ts */
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
    this.calculatePercentage(this.chartOptions);
  }

  chartOptions = {
    animationEnabled: true,
    theme: "dark2",
    title:{
      text: "Recruitment Analysis"
    },
    data: [{
      type: "funnel",
      indexLabel: "{label} - {y}",
      toolTipContent: "{label}: {y} ({percentage}%)",
      neckWidth: 20,
      neckHeight: 0,
      valueRepresents: "area",
      dataPoints: [
        { y: 4871, label: "Applications" },
        { y: 2996, label: "Screened" },
        { y: 1298, label: "Qualified" },
        { y: 918, label: "Interviewed" },
        { y: 251, label: "Offers Extended" },
        { y: 181, label: "Filled" }
      ]
    }]
  }

  calculatePercentage = (chartOptions:any) => {
    let dataPoint = chartOptions.data[0].dataPoints;
    let total = dataPoint[0].y;
    for(let i = 0; i < dataPoint.length; i++) {
      if(i == 0) {
        chartOptions.data[0].dataPoints[i].percentage = 100;
      } else {
        chartOptions.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
      }
    }
  }	
}                              
/* 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

You can customize the height of width of the neck using neckHeight and neckWidth properties. Some other commonly used customizations include valueRepresents, reversed, explodeOnClick, etc.

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