Angular Multi Series Area Chart

Download Angular Chart Samples

Example shows Angular Multi Series Area Chart with custom axis labels for specific datapoints.

/* 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: "Email Analysis"             
	  },
	  axisY: {
		title: "Number of Emails"
	  },
	  data: [{
		type: "area",     
		name: "Received",
		showInLegend: true,
		legendMarkerType: "square",
		color: "rgba(40,175,101,0.6)",
		markerSize: 0,            
		dataPoints: [
		  {x:new Date(2013,0,1,0,0), y: 7, label: "midnight"  },
		  {x:new Date(2013,0,1,1,0), y: 8},
		  {x:new Date(2013,0,1,2,0), y: 5},
		  {x:new Date(2013,0,1,3,0), y: 7},
		  {x:new Date(2013,0,1,4,0), y: 6},
		  {x:new Date(2013,0,1,5,0), y: 8},
		  {x:new Date(2013,0,1,6,0), y: 12},
		  {x:new Date(2013,0,1,7,0), y: 24},
		  {x:new Date(2013,0,1,8,0), y: 36},
		  {x:new Date(2013,0,1,9,0), y: 35},
		  {x:new Date(2013,0,1,10,0), y: 37},
		  {x:new Date(2013,0,1,11,0), y: 29},         
		  {x:new Date(2013,0,1,12,0), y: 34, label: "noon" },                
		  {x:new Date(2013,0,1,13,0), y: 38},
		  {x:new Date(2013,0,1,14,0), y: 23},
		  {x:new Date(2013,0,1,15,0), y: 31},
		  {x:new Date(2013,0,1,16,0), y: 34},
		  {x:new Date(2013,0,1,17,0), y: 29},
		  {x:new Date(2013,0,1,18,0), y: 14},
		  {x:new Date(2013,0,1,19,0), y: 12},
		  {x:new Date(2013,0,1,20,0), y: 10},
		  {x:new Date(2013,0,1,21,0), y: 8},
		  {x:new Date(2013,0,1,22,0), y: 13},
		  {x:new Date(2013,0,1,23,0), y: 11} 
		]
	  }, {
		type: "area",
		name: "Sent",
		showInLegend: true,
		legendMarkerType: "square",
		color: "rgba(0,75,141,0.7)",
		markerSize: 0,
		dataPoints: [
		  {x:new Date(2013,0,1,0,0), y: 12, label: "midnight"  },
		  {x:new Date(2013,0,1,1,0), y: 10},
		  {x:new Date(2013,0,1,2,0), y: 3},
		  {x:new Date(2013,0,1,3,0), y: 5},
		  {x:new Date(2013,0,1,4,0), y: 2},
		  {x:new Date(2013,0,1,5,0), y: 1},
		  {x:new Date(2013,0,1,6,0), y: 3},
		  {x:new Date(2013,0,1,7,0), y: 6},
		  {x:new Date(2013,0,1,8,0), y: 14},
		  {x:new Date(2013,0,1,9,0), y: 15},
		  {x:new Date(2013,0,1,10,0), y: 21},
		  {x:new Date(2013,0,1,11,0), y: 24},         
		  {x:new Date(2013,0,1,12,0), y: 28, label: "noon" },                
		  {x:new Date(2013,0,1,13,0), y: 26},
		  {x:new Date(2013,0,1,14,0), y: 17},
		  {x:new Date(2013,0,1,15,0), y: 23},
		  {x:new Date(2013,0,1,16,0), y: 28},
		  {x:new Date(2013,0,1,17,0), y: 22},
		  {x:new Date(2013,0,1,18,0), y: 10},
		  {x:new Date(2013,0,1,19,0), y: 9},
		  {x:new Date(2013,0,1,20,0), y: 6},
		  {x:new Date(2013,0,1,21,0), y: 4},
		  {x:new Date(2013,0,1,22,0), y: 12},
		  {x:new Date(2013,0,1,23,0), y: 14}
		]
	  }]
	}
}                              
/* 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 show custom label to a particular datapoint by using label property of datapoint. You can use labelFormatter to completely format all the axis labels. For simpler formatting requirements you can use valueFormatString.

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