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 } ] }] } }
/* app.component.html */ <div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
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