Angular Stacked Area 100% Charts are plotted by stacking one series over another. Areas are rendered as a percentage of total value at any given point.
/* 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, title:{ text: "Products Sold by ACME Ltd." }, exportEnabled: true, axisX:{ title: "Seasons", minimum: -0.02, maximum: 3.02 }, axisY:{ title:"Sales" }, toolTip:{ shared: true }, data: [{ type: "stackedArea100", name: "Mosquito Repellents", showInLegend: "true", color: "#006064", toolTipContent: "{label}<br/><span style='\"'color:{color}'\"'>{name}:</span> ${y} (#percent%)", dataPoints: [ { y: 93450 , label: "Spring" }, { y: 61240, label: "Summer" }, { y: 74120, label: "Autumn" }, { y: 81450, label: "Fall" } ] },{ type: "stackedArea100", name: "Liquid Soap", showInLegend: "true", color: "#0097A7", toolTipContent: "<span style='\"'color:{color}'\"'>{name}:</span> ${y} (#percent%)", dataPoints: [ { y: 30140 , label: "Spring" }, { y: 40170, label: "Summer" }, { y: 34410, label: "Autumn" }, { y: 48120, label: "Fall" } ] },{ type: "stackedArea100", name: "Napkins", showInLegend: "true", color: "#00BCD4", toolTipContent: "<span style='\"'color:{color}'\"'>{name}:</span> ${y} (#percent%)", dataPoints: [ { y: 55120 , label: "Spring" }, { y: 60350, label: "Summer" }, { y: 58410, label: "Autumn" }, { y: 63120, label: "Fall" } ] },{ type: "stackedArea100", name: "Sanitizer", showInLegend: "true", color: "#4DD0E1", toolTipContent: "<span style='\"'color:{color}'\"'>{name}:</span> ${y} (#percent%)", dataPoints: [ { y: 51050, label: "Spring" }, { y: 56100, label: "Summer" }, { y: 55010, label: "Autumn" }, { y: 53100, label: "Fall" } ] }] } }
/* 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>
You can position the legend using horizontalAlign & verticalAlign properties. Color of the shaded region can be changed by setting color property. Other customization options include lineThickness, markerColor, lineColor, etc.