Angular Multi Series Column Chart

Download Angular Chart Samples

In Angular Multi Series Column Charts, column from different series are placed next to one another. Note that this chart uses Category Axis with Labels instead of numeric values.

/* 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: "Crude Oil Reserves Vs Production"
	  },
	  axisX: {
		labelAngle: -90
	  },
	  axisY: {
		title: "billion of barrels"
	  },
	  axisY2: {
		title: "million barrels/day"
	  },
	  toolTip: {
		shared: true
	  },
	  legend:{
		cursor:"pointer",
		itemclick: function(e: any){
		  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		  }
		  else {
			e.dataSeries.visible = true;
		  }
		  e.chart.render();
		}
	  },
	  data: [{
		type: "column",	
		name: "Proven Oil Reserves (bn)",
		legendText: "Proven Oil Reserves",
		showInLegend: true, 
		dataPoints:[
		  {label: "Saudi", y: 262},
		  {label: "Venezuela", y: 211},
		  {label: "Canada", y: 175},
		  {label: "Iran", y: 137},
		  {label: "Iraq", y: 115},
		  {label: "Kuwait", y: 104},
		  {label: "UAE", y: 97.8},
		  {label: "Russia", y: 60},
		  {label: "US", y: 23.3},
		  {label: "China", y: 20.4}
		]
	  }, {
		type: "column",	
		name: "Oil Production (million/day)",
		legendText: "Oil Production",
		axisYType: "secondary",
		showInLegend: true,
		dataPoints:[
		  {label: "Saudi", y: 11.15},
		  {label: "Venezuela", y: 2.5},
		  {label: "Canada", y: 3.6},
		  {label: "Iran", y: 4.2},
		  {label: "Iraq", y: 2.6},
		  {label: "Kuwait", y: 2.7},
		  {label: "UAE", y: 3.1},
		  {label: "Russia", y: 10.23},
		  {label: "US", y: 10.3},
		  {label: "China", y: 4.3}
		]
	  }]
	}	
}                              
/* 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

Legends can be enabled for the data-series by setting showInLegend property to true. The text shown in the legends can be changed using legendText property. Other commonly used customization options include shared tooltip, toolTipContent, etc.

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