Example shows an Angular Chart with zooming / panning enabled. This helps you to select a region of focus to better analyze data.
/* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { generateRandomData = () => { var y = 1000, dps = []; for(var i = 0; i < 1000; i++) { y += Math.ceil(Math.random() * 10 - 5); dps.push({ y: y}); } return dps; } chartOptions = { zoomEnabled: true, exportEnabled: true, theme: "light2", title: { text: "Try Zooming & Panning" }, data: [{ type: "line", dataPoints: this.generateRandomData() }] } }
/* 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>
You can zoom or pan along x-axis or y-axis or both. This can be controlled by using zoomType property. You can also customize the look & feel of the toolbar that contains buttons & options for zoom, pan, reset & export options. The color of the dataseries can be changed by setting color property.