Angular StockChart with Numeric Axis

Download Angular Chart Samples

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>

Chart Customizations

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