Angular StockChart with Numeric Axis

//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule, CanvasJSAngularStockChartsModule],
    templateUrl: './app.component.html',
    styleUrl: './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"
            }]
        }
    }
}