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'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule], 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.component.html */ <div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
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.