Angular Multi Series Spline Chart

Download Angular Chart Samples

Example shows Angular Spline Charts where line between datapoints are connected with a smooth line.

/* 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: "Average Monthly Rainfall"
		},
		axisX: {
			title: "Months"
		},
		axisY: { 
			title: "Precipitation (inches)"                   
		},
		toolTip: {
			shared: true
		},
		legend: {
			cursor:"pointer",
			itemclick: function(e) {
			  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
				e.dataSeries.visible = false;
			  } else {
				e.dataSeries.visible = true;
			  }
			  e.chart.render();
			}
		},
		data: [{        
			type: "spline",
			showInLegend: true,
			name: "Boston",
			dataPoints: [
			  { label: "Jan", y: 3.92 },     
			  { label: "Feb", y: 3.31 },     
			  { label: "Mar", y: 3.85 },     
			  { label: "Apr", y: 3.60 },     
			  { label: "May", y: 3.24 },     
			  { label: "Jun", y: 3.22 },     
			  { label: "Jul", y: 3.06 },     
			  { label: "Aug", y: 3.37 },     
			  { label: "Sep", y: 3.47 },     
			  { label: "Oct", y: 3.79 },     
			  { label: "Nov", y: 3.98 },     
			  { label: "Dec", y: 3.73 }
			]
		}, {        
			type: "spline",
			showInLegend: true,
			name: "Los Angeles",
			dataPoints: [
			  { label: "Jan", y: 2.98 },     
			  { label: "Feb", y: 3.11 },     
			  { label: "Mar", y: 2.4 },     
			  { label: "Apr", y: 0.63 },     
			  { label: "May", y: 0.24 },     
			  { label: "Jun", y: 0.08 },     
			  { label: "Jul", y: 0.03 },     
			  { label: "Aug", y: 0.14 },     
			  { label: "Sep", y: 0.26 },     
			  { label: "Oct", y: 0.36 },     
			  { label: "Nov", y: 1.13 },     
			  { label: "Dec", y: 1.79 }
			]
		}, {        
			type: "spline",
			showInLegend: true,
			name: "Seattle",
			dataPoints: [
			  { label: "Jan", y: 5.24 },     
			  { label: "Feb", y: 4.09 },     
			  { label: "Mar", y: 3.92 },     
			  { label: "Apr", y: 2.75 },     
			  { label: "May", y: 2.03 },     
			  { label: "Jun", y: 1.55 },     
			  { label: "Jul", y: 0.93 },     
			  { label: "Aug", y: 1.16 },     
			  { label: "Sep", y: 1.61 },     
			  { label: "Oct", y: 3.24 },     
			  { label: "Nov", y: 5.67 },     
			  { label: "Dec", y: 6.06 }   
			]
		}]
	}	
}                              
/* 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 { }                        
/* app.component.html */
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

Chart type can be changed by setting type property. Setting showInLegend to true will show legends making chart more readable.

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