Angular StockChart Component supports rendering charts against date-time (time series) axis. API also allows you to customize the axis-range, interval of axis labels, format & placement of labels, zooming / panning, etc.
//app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CommonModule } from '@angular/common'; import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts'; import * as data from '../assets/btcusd2018.json'; /* Tutorial: https://www.javatpoint.com/display-data-from-json-file-in-angular */ interface JsonData { "date": string, "open": number, "high": number, "low": number, "close": number, "volume_btc": number } @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, CommonModule, CanvasJSAngularStockChartsModule], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { dps1: any = []; dps2: any = []; stockChartOptions = { exportEnabled: true, theme: "light2", title: { text: "Angular StockChart with Date-Time Axis" }, charts: [{ axisY: { title: "Bitcoin Price", prefix: "$", tickLength: 0 }, data: [{ type: "candlestick", name: "Price (in USD)", yValueFormatString: "$#,###.##", dataPoints: this.dps1 }] }], navigator: { data: [{ dataPoints: this.dps2 }], slider: { minimum: new Date(2018, 2, 1), maximum: new Date(2018, 9, 31) } } } jsonData: JsonData[] = (data as any).default; ngOnInit() { for (var i = 0; i < this.jsonData.length; i++) { this.dps1.push({ x: new Date(this.jsonData[i].date), y: [Number(this.jsonData[i].open), Number(this.jsonData[i].high), Number(this.jsonData[i].low), Number(this.jsonData[i].close)] }); this.dps2.push({ x: new Date(this.jsonData[i].date), y: Number(this.jsonData[i].close) }); } } }
<!-- app.component.html --> <div> <canvasjs-stockchart [options]="stockChartOptions" [styles]="{width: '100%', height: '450px'}"></canvasjs-stockchart> </div>