Angular Pyramid Chart with Index Labels

Download Angular Chart Samples

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>

Chart Customizations

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.

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