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) });
}
}
}