Angular Step Line Charts are also known as step charts & sometimes staircase shaped chart because of it's shape.
/* 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 { chart: any; chartOptions = { animationEnabled: true, exportEnabled: true, title: { text: "Stock Movement" }, axisY: { title: "Stock in Hand" }, data: [{ type: "stepLine", dataPoints: [ { x: new Date(2021, 0, 1), y: 1792 }, { x: new Date(2021, 1, 1), y: 1326 }, { x: new Date(2021, 2, 1), y: 1955 }, { x: new Date(2021, 3, 1), y: 1727 }, { x: new Date(2021, 4, 1), y: 1085 }, { x: new Date(2021, 5, 1), y: 1523 }, { x: new Date(2021, 6, 1), y: 1257 }, { x: new Date(2021, 7, 1), y: 1520 }, { x: new Date(2021, 8, 1), y: 1853 }, { x: new Date(2021, 9, 1), y: 1738 }, { x: new Date(2021, 10, 1), y: 1754 }, { x: new Date(2021, 11, 1), y: 1624 } ] }] } }
/* app.component.html */ <div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
lineThickness, lineDashType and lineColor properties can be used to set the thickness, dash-type and color of the line. Other commonly used customizations include markerType, markerSize, etc.
Note For step by step instructions, follow our Angular Integration Tutorial