Example shows Angular Multi Series Step Line Chart that can be used to showcase revenue & expense comparison.
/* app.component.ts */
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
chartOptions = {
animationEnabled: true,
title:{
text: "Multi-Series StepLine Chart"
},
axisY:{
labelFontColor: "#4F81BC" ,
lineColor: "#4F81BC" ,
lineThickness: 3
},
toolTip: {
shared: true
},
axisY2:{
labelFontColor: "#C0504E",
lineColor: "#C0504E",
lineThickness: 3
},
data: [{
type: "stepLine",
lineThickness: 3,
dataPoints: [
{ x: new Date(2020,02), y: 15.00 },
{ x: new Date(2020,03), y: 14.50 },
{ x: new Date(2020,04), y: 14.00 },
{ x: new Date(2020,05), y: 14.50 },
{ x: new Date(2020,06), y: 14.75 },
{ x: new Date(2020,07), y: 15.20 },
{ x: new Date(2020,08), y: 15.80 },
{ x: new Date(2020,09), y: 17.50 }
]
}, {
type: "stepLine",
axisYType: "secondary",
lineThickness: 3,
dataPoints: [
{ x: new Date(2020,02), y: 41.00 },
{ x: new Date(2020,03), y: 43.50 },
{ x: new Date(2020,04), y: 41.00 },
{ x: new Date(2020,05), y: 45.50 },
{ x: new Date(2020,06), y: 47.55 },
{ x: new Date(2020,07), y: 45.00 },
{ x: new Date(2020,08), y: 40.70 },
{ x: new Date(2020,09), y: 37.00 }
]
}]
}
}
A dataseries can be attached to secondary axis by setting axisYType property. Also color & thickness of axis lines can be changed by setting lineColor & lineThickness properties.
Note For step by step instructions, follow our Angular Integration Tutorial