Angular Multi Series Range Spline Area Chart

Download Angular Chart Samples

Example shows Angular Range Spline Area Chart with emojis in subtitle and tooltip.

/* 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,
	  theme: "light2",
	  title:{
		text: "Monthly Average High/Low Temperature"
	  },
	  subtitles: [{
		text: "🇫🇷 v/s 🇦🇪",
		fontSize: 20
	  }],
	  axisY: {
		valueFormatString: "#,##0°C"
	  },
	  toolTip: {
		shared: true
	  },
	  legend: {
		verticalAlign: "top",
		horizontalAlign: "right",
		dockInsidePlotArea: true
	  },
	  data: [{
		type: "rangeSplineArea",
		name: "Paris",
		showInLegend: true,
		toolTipContent: "{label}<br/> <span style='\"'color: {color};font-weight: bold;'\"'>🇫🇷 {name}</span>, {y[0]}°C - {y[1]}°C",
		dataPoints: [
		  { label: "Jan", y: [2, 7] },
		  { label: "Feb", y: [2, 8] },
		  { label: "Mar", y: [5, 12] },
		  { label: "Apr", y: [7, 16] },
		  { label: "May", y: [10, 19] },
		  { label: "Jun", y: [13, 23] },
		  { label: "Jul", y: [15, 25] },
		  { label: "Aug", y: [15, 25] },
		  { label: "Sep", y: [12, 21] },
		  { label: "Oct", y: [9, 16] },
		  { label: "Nov", y: [5, 11] },
		  { label: "Dec", y: [3, 8] }
		]
	  }, {
		type: "rangeSplineArea",
		name: "Dubai",
		showInLegend: true,
		toolTipContent: "<span style='\"'color: {color};font-weight: bold;'\"'>🇦🇪 {name}</span>, {y[0]}°C - {y[1]}°C",
		dataPoints: [
		  { label: "Jan", y: [14, 24] },
		  { label: "Feb", y: [16, 25] },
		  { label: "Mar", y: [18, 29] },
		  { label: "Apr", y: [21, 33] },
		  { label: "May", y: [25, 38] },
		  { label: "Jun", y: [28, 40] },
		  { label: "Jul", y: [30, 41] },
		  { label: "Aug", y: [31, 41] },
		  { label: "Sep", y: [28, 39] },
		  { label: "Oct", y: [24, 35] },
		  { label: "Nov", y: [20, 31] },
		  { label: "Dec", y: [16, 26] }
		]
	  }]
	}	
}                              
/* 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, emojis are shown tooltip with the help of toolTipContent property. Similarly it can be added to any text content like title, subtitles, legend, etc. Some other commonly used customizations in range spline area chart includes changing dataseries color, fillOpacity, markerSize, markerColor, etc.

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