Example shows Angular Stacked Column Chart in which columns from each dataseries are stacked vertically on top of each other.
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>
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.