Angular StockChart Component supports numeric axis along with options to control & customize axis parameters like auto-labelling, interval, interval-type, label-formatting, font-customizations, etc.
//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.round(5 + Math.random() *(-5-5)); dps.push({ y: y}); } return dps; } stockChartOptions = { exportEnabled: true, title: { text: "Angular StockChart with Numeric Axis" }, charts: [{ data: [{ type: "line", dataPoints: this.generateRandomData() }] }], rangeSelector: { inputFields: { startValue: 200, endValue: 800 }, buttons: [{ label: "100", range: 100, rangeType: "number" },{ label: "200", range: 200, rangeType: "number" },{ label: "500", range: 500, rangeType: "number" },{ label: "All", rangeType: "all" }] } } }
//app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CanvasJSAngularStockChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
<!-- app.component.html --> <div> <canvasjs-stockchart [options]="stockChartOptions" [styles]="{width: '100%', height: '450px'}"></canvasjs-stockchart> </div>