While charts are used for analysis, few advanced features are required for stock data analysis – generally called as StockChart. This article briefs about how to create StockChart & customize it to match it with website theme.
How to Create StockChart?
- Download CanvasJS StockChart from their website.
- Include canvasjs.stock.min.js in your dashboard.
- Create StockChart, add dataPoints & render it.
Expand|Select|Wrap|Line Numbers
- var dataPoints = [];
- var stockChartOptions = {
- charts: [{
- data: [{
- type: "spline",
- dataPoints: dataPoints
- }]
- }]
- };
- var stockChart = new CanvasJS.StockChart("stockChartContainer", stockChartOptions);
- //Reading data from JSON
- $.getJSON("https://api.npoint.io/5ac670dd66db71dffa1f", function(data) {
- for(var i = 0; i < data.length; i++){
- dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});
- }
- stockChart.render();
- });
Customizing StockChart
CanvasJS provides options to change the colors of data, title, labels and all other elements along with customizing font properties like font-family, font-size, font-color, font-weight. These customization options help in making StockChart match with dashboard font and color properties. Refer to the documentation for complete list of customization options available.
You can further have multiple charts (charts – as termed by the library which developers generally call as panels or panes) and synchronizes tooltip & crosshair across them automatically. Checkout this page for demo.