Angular Spline Area Chart

Download Angular Chart Samples

Example shows Angular Spline Area Chart where the envelope of the area is smooth curve.

/* 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: "Music Album Sales by Year"
	  }, 
	  axisY: {
		title: "Units Sold",
		valueFormatString: "#0,,.",
		suffix: "M"
	  },
	  data: [{
		type: "splineArea",
		color: "rgba(54,158,173,.7)",
		xValueFormatString: "YYYY",
		dataPoints: [
		  {x: new Date(2004,0), y: 2506000},     
		  {x: new Date(2005,0), y: 2798000},     
		  {x: new Date(2006,0), y: 3386000},     
		  {x: new Date(2007,0), y: 6944000},     
		  {x: new Date(2008,0), y: 6026000},     
		  {x: new Date(2009,0), y: 2394000},     
		  {x: new Date(2010,0), y: 1872000},     
		  {x: new Date(2011,0), y: 2140000},     
		  {x: new Date(2012,0), y: 7289000},     
		  {x: new Date(2013,0), y: 4830000},     
		  {x: new Date(2014,0), y: 2009000},     
		  {x: new Date(2015,0), y: 2840000},     
		  {x: new Date(2016,0), y: 2396000},     
		  {x: new Date(2017,0), y: 1613000},     
		  {x: new Date(2018,0), y: 2821000},     
		  {x: new Date(2019,0), y: 2000000},     
		  {x: new Date(2020,0), y: 1397000}    
		]
	  }]
	}	
}                              
/* 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

The enveloping line in spline area charts can be customized by using lineDashType, lineColor and lineThickness properties. Color of marker & it's border can be changed by setting markerColor & markerBorderColor properties.

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