Angular Stacked Column Chart

Download Angular Chart Samples

Example shows Angular Stacked Column Chart in which columns from each dataseries are stacked vertically on top of each other.

Read More >>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chart: any;

  chartOptions = {
    theme: "dark2",
    title:{
      text: "Platform Impressions by Quarter"
    },
    animationEnabled: true,
    toolTip: {
      shared: true
    },
    legend: {
      horizontalAlign: "right",
      verticalAlign: "center",
      reversed: true
    },
    axisY: {
       includeZero: true
    },
    data: [{
      type: "stackedColumn",
      name: "Facebook",
      showInLegend: true,
      dataPoints: [
        { label: "Qtr 1", y: 19729 },
        { label: "Qtr 2", y: 22127 },
        { label: "Qtr 3", y: 12654 },
        { label: "Qtr 4", y: 22914 }
      ]
    }, {
        type: "stackedColumn",
        name: "Twitter",
        showInLegend: true,
        dataPoints: [
          { label: "Qtr 1", y: 4288 },
          { label: "Qtr 2", y: 6390 },
          { label: "Qtr 3", y: 3510 },
          { label: "Qtr 4", y: 3876 }
        ]
    }, {
        type: "stackedColumn",
         name: "Instagram",
        showInLegend: true,
        dataPoints: [
          { label: "Qtr 1", y: 5338 },
          { label: "Qtr 2", y: 8670 },
          { label: "Qtr 3", y: 4779 },
          { label: "Qtr 4", y: 9415 }
        ]
    }]
  }	
}                              
/* 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>

Related Customization

In the example legends are positioned to right-center by setting horizontalAlign & verticalAlign properties. You can reverse the order of legend items using reversed property.

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