Example shows Angular OHLC Chart with data from JSON file. Similarly, you can plot from CSV, XML as well
/* app.component.ts */
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import ethUSDData from "./ethusdjan2021.json";
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
dps: any[] = [];
ngOnInit() {
let data = ethUSDData;
for(let i = 0; i < data.length; i++){
this.dps.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
}
}
chartOptions = {
title: {
text: "Ethereum Price"
},
axisY: {
title: "Price in USD",
prefix: "$"
},
axisX: {
valueFormatString: "MMM D",
},
data: [{
type: "ohlc",
yValueFormatString: "$#,###.00",
xValueType: "dateTime",
dataPoints: this.dps
}]
}
}
<div>
<canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>
</div>
/*ethusdjan2021.json*/
[
{ "date": "2021-01-01", "open": 737.708374, "high": 749.201843, "low": 719.792236, "close": 730.367554, "volume": 13652004358 },
{ "date": "2021-01-02", "open": 730.402649, "high": 786.798462, "low": 718.109497, "close": 774.534973, "volume": 19740771179 },
{ "date": "2021-01-03", "open": 774.511841, "high": 1006.565002, "low": 771.561646, "close": 975.50769, "volume": 45200463368 },
{ "date": "2021-01-04", "open": 977.058838, "high": 1153.189209, "low": 912.305359, "close": 1040.233032, "volume": 56945985763 },
{ "date": "2021-01-05", "open": 1041.498779, "high": 1129.37146, "low": 986.811279, "close": 1100.006104, "volume": 41535932781 },
{ "date": "2021-01-06", "open": 1101.005005, "high": 1209.428589, "low": 1064.233398, "close": 1207.112183, "volume": 44699914188 },
{ "date": "2021-01-07", "open": 1208.078369, "high": 1282.57959, "low": 1167.443115, "close": 1225.678101, "volume": 40468027280 },
{ "date": "2021-01-08", "open": 1225.967896, "high": 1273.827515, "low": 1076.081543, "close": 1224.197144, "volume": 44334826666 },
{ "date": "2021-01-09", "open": 1223.740479, "high": 1303.871826, "low": 1182.270386, "close": 1281.077271, "volume": 33233105361 },
{ "date": "2021-01-10", "open": 1280.871094, "high": 1347.926147, "low": 1194.715576, "close": 1262.246704, "volume": 40616938053 },
{ "date": "2021-01-11", "open": 1261.622925, "high": 1261.622925, "low": 924.922607, "close": 1090.145386, "volume": 60733630300 },
{ "date": "2021-01-12", "open": 1088.526733, "high": 1149.240234, "low": 1012.76416, "close": 1043.43457, "volume": 37494601692 },
{ "date": "2021-01-13", "open": 1043.740967, "high": 1134.338501, "low": 994.549072, "close": 1130.73938, "volume": 30109792795 },
{ "date": "2021-01-14", "open": 1130.231201, "high": 1244.163086, "low": 1093.060791, "close": 1218.453003, "volume": 33410915929 },
{ "date": "2021-01-15", "open": 1221.877197, "high": 1250.505859, "low": 1090.721069, "close": 1171.834595, "volume": 35972039310 },
{ "date": "2021-01-16", "open": 1171.443115, "high": 1290.053589, "low": 1157.623779, "close": 1233.537598, "volume": 32319240157 },
{ "date": "2021-01-17", "open": 1233.453369, "high": 1265.644653, "low": 1174.38855, "close": 1230.172241, "volume": 29258032819 },
{ "date": "2021-01-18", "open": 1230.313232, "high": 1259.450073, "low": 1187.311035, "close": 1257.279541, "volume": 25817455560 },
{ "date": "2021-01-19", "open": 1257.43457, "high": 1432.300049, "low": 1254.522949, "close": 1377.295898, "volume": 47195935190 },
{ "date": "2021-01-20", "open": 1375.248413, "high": 1405.744141, "low": 1243.299927, "close": 1382.274048, "volume": 46784030909 },
{ "date": "2021-01-21", "open": 1382.684448, "high": 1382.684448, "low": 1098.476196, "close": 1121.570923, "volume": 45932464754 },
{ "date": "2021-01-22", "open": 1118.889038, "high": 1271.687622, "low": 1046.596558, "close": 1236.512207, "volume": 43918338506 },
{ "date": "2021-01-23", "open": 1235.267944, "high": 1272.151123, "low": 1200.893311, "close": 1230.990601, "volume": 27253895441 },
{ "date": "2021-01-24", "open": 1231.210571, "high": 1395.111328, "low": 1225.274048, "close": 1391.609375, "volume": 36418163554 },
{ "date": "2021-01-25", "open": 1390.639893, "high": 1467.784912, "low": 1304.973999, "close": 1324.414795, "volume": 43565777745 },
{ "date": "2021-01-26", "open": 1323.741699, "high": 1376.085083, "low": 1253.340332, "close": 1357.058105, "volume": 41572917750 },
{ "date": "2021-01-27", "open": 1358.333374, "high": 1368.074097, "low": 1215.311279, "close": 1253.187134, "volume": 39394416990 },
{ "date": "2021-01-28", "open": 1251.279785, "high": 1356.288696, "low": 1226.17395, "close": 1332.492188, "volume": 34637234789 },
{ "date": "2021-01-29", "open": 1369.086792, "high": 1428.981201, "low": 1292.240112, "close": 1382.522827, "volume": 53611955259 },
{ "date": "2021-01-30", "open": 1382.231934, "high": 1402.39978, "low": 1328.529053, "close": 1376.115479, "volume": 30616574234 },
{ "date": "2021-01-31", "open": 1376.823608, "high": 1378.916016, "low": 1288.501587, "close": 1314.986206, "volume": 25198853581 }
]
When there are more number of datapoints, it's good to enable zooming by settingzoomEnabled property to true. Some other common customizations are color, animationEnabled etc.
Note For step by step instructions, follow our Angular Integration Tutorial