Angular Stacked Area Chart

Download Angular Chart Samples

Example shows Angular Stacked Area Chart that is formed by stacking multiple dataseries one on top of the other.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
	chartOptions = {
	  title: {
		text: "Productivity by Day"             
	  },
	  animationEnabled: true,
	  axisX: {      
		valueFormatString: "DDD"
	  },
	  toolTip: {
		shared: true,
		contentFormatter: function (e: any) {
		  var weekday = ["Sun","Mon", "Tue", "Wed", "Thu","Fri","Sat"];
		  var content = weekday[e.entries[0].dataPoint.x.getDay()] + "<br/>";
		  for (var i = e.entries.length - 1; i >= 0; i--) {
			content += "<span style ='color:" + e.entries[i].dataSeries.color + "; font-weight: bold;';>" + e.entries[i].dataSeries.name + "</span>:" + e.entries[i].dataPoint.y + "hrs";
			content += "<br/>";
		  }
		  return content;
		}
	  },
	  legend: {
		cursor: "pointer",
		itemclick: function(e: any) {
		  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		  }
		  else {
			e.dataSeries.visible = true;
		  }
		  e.chart.render();
		}
	  },
	  data: [
		{
		  type: "stackedArea",
		  name: "Very Distracting",
		  showInLegend: true,
		  legendMarkerType: "square",
		  color: "rgba(211,19,14,.9)",
		  markerSize: 0,
		  dataPoints: [
			{x: new Date(2020, 2, 15), y: 2.4 },
			{x: new Date(2020, 2, 16), y: .6 },
			{x: new Date(2020, 2, 17), y: .8 },
			{x: new Date(2020, 2, 18), y: 1.6 },
			{x: new Date(2020, 2, 19), y: 1.4 },
			{x: new Date(2020, 2, 20), y: 1.4 },
			{x: new Date(2020, 2, 21), y: 2.6 }
		  ]
		},
		{
		  type: "stackedArea",        
		  name: "Distracting",
		  showInLegend: true,
		  legendMarkerType: "square",
		  markerSize: 0,
		  color: "rgba(95,53,87,.9)",
		  dataPoints: [
			{x: new Date(2020, 2, 15), y: 3.3 },
			{x: new Date(2020, 2, 16), y: 1.6 },
			{x: new Date(2020, 2, 17), y: 2.1 },
			{x: new Date(2020, 2, 18), y: 1.6 },
			{x: new Date(2020, 2, 19), y: 1.4 },
			{x: new Date(2020, 2, 20), y: 1.7 },
			{x: new Date(2020, 2, 21), y: 4.6 }
		  ]
		},            
		{
		  type: "stackedArea",
		  name: "Productive",
		  showInLegend: true,
		  legendMarkerType: "square",
		  markerSize: 0,
		  color: "rgba(60,84,151,.9)",
		  dataPoints: [
			{x: new Date(2020, 2, 15), y: 2.4 },
			{x: new Date(2020, 2, 16), y:  2 },
			{x: new Date(2020, 2, 17), y: 2.8 },
			{x: new Date(2020, 2, 18), y: 1.6 },
			{x: new Date(2020, 2, 19), y: 1.4 },
			{x: new Date(2020, 2, 20), y: 1.4 },
			{x: new Date(2020, 2, 21), y: 1.6 }
		  ]
		},
		{
		  legendMarkerType: "square",
		  name: "Very Productive",
		  showInLegend: true,
		  type: "stackedArea",
		  markerSize: 0,
		  color: "rgba(22,115,211,.9)",
		  dataPoints: [
			{x: new Date(2020, 2, 15), y: .4 },
			{x: new Date(2020, 2, 16), y: 7 },
			{x: new Date(2020, 2, 17), y: 6.8 },
			{x: new Date(2020, 2, 18), y: 4.6 },
			{x: new Date(2020, 2, 19), y: 6.4 },
			{x: new Date(2020, 2, 20), y: 7.4 },
			{x: new Date(2020, 2, 21), y: 1.6 }
		  ]
		}
	  ]
	}	
}                              
/* 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 above example, tooltip content has been customized with the help of contentFormatter. Dataseries can be shown / hidden by clicking the legend. Some other customizations include showInLegend, shared tooltip, etc.

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