Example shows Angular Pyramid Chart with Index Labels
/* 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, theme: "light2", title:{ text: "Product Manufacturing Expenses" }, data: [{ type: "pyramid", indexLabelFontSize: 18, showInLegend: true, legendText: "{indexLabel}", toolTipContent: "{indexLabel}: {y}%", dataPoints: [ { y: 32, indexLabel: "Research and Design" }, { y: 28, indexLabel: "Manufacturing" }, { y: 15, indexLabel: "Marketing" }, { y: 13, indexLabel: "Shipping" }, { y: 12, indexLabel: "Retail" } ] }] } }
/* 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>
valueRepresents property lets you specify whether the values are proportional to area / height of each section. Pyramid Chart can be reversed to make it look like funnel chart. Some other commonly used customization in pyramid chart includes exploded, explodeOnClick, etc.