Angular Step Area Chart

Download Angular Chart Samples

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>

Chart Customizations

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.

Note   For step by step instructions, follow our Angular Integration Tutorial