Angular Multi Series Range Column Chart

Download Angular Chart Samples

In Angular Multi Series Range Column Chart, datapoints from different series are placed next to one another and are differentiated by their series color.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
	chartOptions = {
	  theme: "dark2",
	  animationEnabled: true,
	  exportEnabled: true,
	  title:{
		text: "Temperature of New York & London",
	  },
	  axisY: {
		title: "Temperature",
		valueFormatString: "#0.##°F",
		crosshair: {
		  enabled: true,
		  valueFormatString: "#0.0°F"
		}
	  },     
	  axisX: {
		valueFormatString: "MMM",
		crosshair: {
		  enabled: true,
		  snapToDataPoint: true
		}
	  },
	  toolTip: {
		shared: true,		
	  },
	  data: [
		{
		  type: "rangeColumn",
		  bevelEnabled: true,
		  yValueFormatString: "#0.##°F",
		  name: "New York",
		  showInLegend: true,
		  dataPoints: [   
			{ x: new Date(2021, 0, 1), y: [28, 40] },
			{ x: new Date(2021, 1, 1), y: [30, 42] },
			{ x: new Date(2021, 2, 1), y: [36, 50] },
			{ x: new Date(2021, 3, 1), y: [46, 62] },
			{ x: new Date(2021, 4, 1), y: [55, 71] },
			{ x: new Date(2021, 5, 1), y: [64, 80] },
			{ x: new Date(2021, 6, 1), y: [70, 85] },
			{ x: new Date(2021, 7, 1), y: [69, 83] },
			{ x: new Date(2021, 8, 1), y: [62, 76] },
			{ x: new Date(2021, 9, 1), y: [51, 65] },
			{ x: new Date(2021, 10, 1), y: [42, 54] },
			{ x: new Date(2021, 11, 1), y: [34, 44] }
		  ]
		}, {
		  type: "rangeColumn",
		  bevelEnabled: true,
		  showInLegend: true,
		  name: "London",
		  yValueFormatString: "#0.##°F",
		  dataPoints: [   
			{ x: new Date(2021, 0, 1), y: [37, 47] },
			{ x: new Date(2021, 1, 1), y: [37, 48] },
			{ x: new Date(2021, 2, 1), y: [39, 53] },
			{ x: new Date(2021, 3, 1), y: [43, 59] },
			{ x: new Date(2021, 4, 1), y: [48, 65] },
			{ x: new Date(2021, 5, 1), y: [54, 71] },
			{ x: new Date(2021, 6, 1), y: [58, 75] },
			{ x: new Date(2021, 7, 1), y: [57, 74] },
			{ x: new Date(2021, 8, 1), y: [53, 68] },
			{ x: new Date(2021, 9, 1), y: [48, 60] },
			{ x: new Date(2021, 10, 1), y: [41, 53] },
			{ x: new Date(2021, 11, 1), y: [38, 48] }
		  ]
		}]
	}	
}                              
/* 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

color property can be used to change the color of each series. Shared Tooltip will be a useful feature in case of multi-series charts. Content of the tooltip can be customized by using contentFormatter.

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