Angular Stacked Bar Chart

Download Angular Chart Samples

In Angular Stacked Bar Charts datapoints are stacked one on top of the other instead of placing them side-by-side like in normal multi-series bar chart.

/* 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,
    exportEnabled: true,
    title:{
      text: "Quarterly Sales",
      fontFamily: "Calibri, Arial, sans-serif"
    },
    axisX:{
      title: "Quarter",
      reversed: true
    },
    axisY:{
      title: "Sales",
      prefix: "$",
      suffix: "k",
      includeZero: true
    },
    toolTip:  {
      shared: true
    },
    data: [{
      type: "stackedBar",
      name: "Product A",
      showInLegend: "true",
      yValueFormatString: "#,###k",
      color: "#edae49",
      dataPoints: [
        {  y: 42, label: "Q1"},
        {  y: 53, label: "Q2" },
        {  y: 47, label: "Q3" },
        {  y: 60, label: "Q4" }
      ]
    }, {
      type: "stackedBar",
      name: "Product B",
      showInLegend: "true",
      yValueFormatString: "#,###k",
      color: "#df7c52",
      dataPoints: [
        {  y: 48, label: "Q1"},
        {  y: 62, label: "Q2" },
        {  y: 55, label: "Q3" },
        {  y: 74, label: "Q4" }
      ]
    }, {
      type: "stackedBar",
      name: "Product C",
      showInLegend: "true",
      yValueFormatString: "#,###k",
      color: "#d1495b",
      dataPoints: [
        {  y: 46, label: "Q1"},
        {  y: 60, label: "Q2" },
        {  y: 58, label: "Q3" },
        {  y: 70, label: "Q4" }
      ]
    }, {
      type: "stackedBar",
      name: "Product D",
      showInLegend: "true",
      yValueFormatString: "#,###k",
      color: "#9d5568",
      dataPoints: [
        {  y: 32, label: "Q1"},
        {  y: 45, label: "Q2" },
        {  y: 54, label: "Q3" },
        {  y: 46, label: "Q4" }
      ]
    }]
  }	
}                              
/* 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 use dataPointWidth to control the width of bar. Some other frequently used customization options are shared tooltip, showInLegend, color, etc.

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