Example shows Angular Multi Series Step Line Chart that can be used to showcase revenue & expense comparison.
Read More >>
/* 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: "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.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>
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.