Angular Multi Series Range Area Chart

Download Angular Chart Samples

Example shows Multi Series Range Area Chart with custom formatting in axis labels & tooltip content.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
  chartOptions = {
    exportEnabled: true,
    animationEnabled: true,
    theme: "light2",
    title:{
      text: "Temperature Variation"
    },
    subtitles:[{
      text: "Gurugram vs Shimla"
    }],
    axisX: {
      valueFormatString: "MMMM"
    },
    axisY: {
      suffix: " °C"
    },     
    toolTip: {
      shared: true
    },
    legend: {
      cursor: "pointer",
      horizontalAlign: "right",
        verticalAlign: "top"
    },
    data: [{
      type: "rangeArea",
      showInLegend: true,
      name: "Gurugram",
      markerSize: 0,
      xValueFormatString: "MMM YYYY",
      yValueFormatString: "#0.## °C",
      color: "#FF9800",
      dataPoints: [
        { x: new Date(2020, 0, 1), y: [2.389, 23.5] },
        { x: new Date(2020, 1, 1), y: [5.278, 28] },
        { x: new Date(2020, 2, 1), y: [10, 33.3] },
        { x: new Date(2020, 3, 1), y: [13.5, 41.222] },
        { x: new Date(2020, 4, 1), y: [19.5, 47.611] },
        { x: new Date(2020, 5, 1), y: [19.778, 44.222] },
        { x: new Date(2020, 6, 1), y: [20.778, 43.222] },
        { x: new Date(2020, 7, 1), y: [24, 37.611] },
        { x: new Date(2020, 8, 1), y: [21.778, 38] },
        { x: new Date(2020, 9, 1), y: [12.5, 37] },
        { x: new Date(2020, 10, 1), y: [6.278, 31.611] },
        { x: new Date(2020, 11, 1), y: [3.278, 29] }
      ]
    },
    {
      type: "rangeArea",
      showInLegend: true,
      name: "Shimla",
      markerSize: 0,
      yValueFormatString: "#0.## °C",
      color: "#BA68C8",
      dataPoints: [
        { x: new Date(2020, 0, 1), y: [-1.3, 22] },
        { x: new Date(2020, 1, 1), y: [-2, 26.4] },
        { x: new Date(2020, 2, 1), y: [0.6, 29.4] },
        { x: new Date(2020, 3, 1), y: [6.6, 37.9] },
        { x: new Date(2020, 4, 1), y: [8.278, 43.111] },
        { x: new Date(2020, 5, 1), y: [10.389, 40.4] },
        { x: new Date(2020, 6, 1), y: [13, 39.111] },
        { x: new Date(2020, 7, 1), y: [15.6, 39.778] },
        { x: new Date(2020, 8, 1), y: [14.6, 36.611] },
        { x: new Date(2020, 9, 1), y: [9.6, 35.3] },
        { x: new Date(2020, 10, 1), y: [2.778, 31.111] },
        { x: new Date(2020, 11, 1), y: [-1.111, 28.111] }
      ]
    }]
  }	
}                              
/* 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, xValueFormatString & yValueFormatString are used to format the x & y-value shown in tooltip. Similarly, valueFormatString is used to format labels in x-axis. Some other customizations in range area charts include removing markers by setting markerSize to 0, changing the color of filled region by setting color property, etc.

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