Angular Stacked Bar 100% Chart with Index Labels

Download Angular Chart Samples

Example shows Angular Stacked Bar 100% Chart with Index/Data Labels shown for all the datapoints. Index Labels are also known as Data Labels & they show more information about the datapoint in chart.

/* app.component.ts */
import { Component } from '@angular/core';
declare var require: any;
var CanvasJS = require('../assets/canvasjs.min');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
  chartOptions = {
    theme: 'light2',
    title:{
      text: "Time Spent in Holiday Season"
    },
    animationEnabled: true,
    axisY:{
      title: "Percent",
      suffix: "%"
    },
    legend :{
      horizontalAlign: 'center',
      verticalAlign: 'bottom'
    },
    toolTip: {
      shared: true
    },
    data:[{        
      type: "stackedBar100",
      showInLegend: true, 
      color: "#BBDEFB",
      name: "With Friends",
      indexLabel: "#percent%",
      toolTipContent: "<b>{label}</b><br/><span style='\"'color:{color}'\"'>{name}:</span> #percent%",
      dataPoints: [
        { y: 320, label: "Shah" },
        { y: 300, label: "Joe" },
        { y: 400, label: "Fin" },
        { y: 220, label: "Larry" }
      ]
    },
    {        
      type: "stackedBar100",
      showInLegend: true, 
      name: "Eating Out",
      color: "#80DEEA",
      indexLabel: "#percent%",
      toolTipContent: "{name}: #percent%",
      dataPoints: [
        { y: 320, label: "Shah" },
        { y: 320, label: "Joe" },
        { y: 280, label: "Fin" },
        { y: 420, label: "Larry" }
      ]
    },
    {        
      type: "stackedBar100",
      showInLegend: true, 
      name: "Reading",
      color: "#FFAB91",
      indexLabel: "#percent%",
      toolTipContent: "{name}: #percent%",
      dataPoints: [
        { y: 120, label: "Shah" },
        { y: 120, label: "Joe" },
        { y: 300, label: "Fin" },
        { y: 120, label: "Larry" }
      ]
    },
    {        
      type: "stackedBar100",
      showInLegend: true, 
      name: "Shopping",
      color: "#B0BEC5",
      indexLabel: "#percent%",
      toolTipContent: "{name}: #percent%",
      dataPoints: [
        { y: 320, label: "Shah" },
        { y: 220, label: "Joe" },
        { y: 150, label: "Fin" },
        { y: 420, label: "Larry" }
      ]
    },
    {        
      type: "stackedBar100",
      showInLegend: true, 
      name: "Travel",
      color: "#BCAAA4",
      indexLabel: "#percent%",
      toolTipContent: "{name}: #percent%",
      dataPoints: [
        { y: 120, label: "Shah" },
        { y: 160, label: "Joe" },
        { y: 140, label: "Fin" },
        { y: 80, label: "Larry" }

      ]
    },
		{        
      type: "stackedBar100",
      showInLegend: true, 
      name: "Internet",
      color: "#A5D6A7",
      indexLabel: "#percent%",
      toolTipContent: "{name}: #percent%",
      dataPoints: [
        { y: 104, label: "Shah" },
        { y: 120, label: "Joe" },
        { y: 300, label: "Fin" },
        { y: 420, label: "Larry" }
      ]
    }]
  }	
}                              
/* 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

In the example above, we have modified the content of tooltip using toolTipContent property. You can place indexlabel inside the datapoint by setting indexLabelPlacement property to "inside". Other customizable options include indexLabelOrientation, indexLabelTextAlign, yValueFormatString, etc.

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