Angular Step Area Chart shows the rise and fall of datapoint value using horizontal and vertical lines
/* 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, theme: "light2", title:{ text: "Avalanche Events Occurance" }, subtitles: [{ text: "U.S.A" }], axisY: { title: "Event Count", includeZero: true, }, data: [{ type: "stepArea", color: "#64B5F6", lineColor: "#0D47A1", markerColor: "#0D47A1", markerSize: 5, dataPoints: [ { label: "2003", y: 11 }, { label: "2004", y: 24 }, { label: "2006", y: 46 }, { label: "2007", y: 25 }, { label: "2008", y: 43 }, { label: "2009", y: 12 }, ] }] } }
/* 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 { }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
In the above example, color of the shaded / filled region is customized using color property. You can set the color of the line using lineColor property. Other customization option includes markerColor, markerSize, lineThickness, etc.