How to Implement Financial Charts using CanvasJS ?

Last Updated : 05 Jun, 2023

In this article, we will learn to implement Financial Charts using the CanvasJS plugin. A candlestick chart is a financial chart that shows the price movement of stocks, derivatives, and other financial instruments in real time, there are simply four essential components that must be examined. The open, high, low, and close are the four key elements, and the candlestick chart has been used. It’s one of the world’s oldest charts.

OHLC charts are one of the most important financial charts that represent the Open, High, Low, and Close prices of a stock.

Syntax:

new CanvasJS.Chart($("#ID"), {
     data: [{         
          type: "candlestick",     
          dataPoints: [
            {...},       
        ]
      }]        
});

Note: Change the type attribute to “ohlc” in the case of implementing OHLC Charts using Canvas JS.

Approach:

In the HTML design, use the <div> tag for showing the candlestick or ohlc chart.
In the script part of the code, instantiate the CanvasJS object by setting the type, data, datapoints, and other options properties of the library.
Include the CDN link in the head section of the code to use the plugin’s features.
Render the chart using the render() method of the Canvas JS plugin.
Set other attributes or properties as needed for the styling of the financial chart as given in the following example codes.
Make charts depending on the data available for code implementation.

CDN Link:

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Example 1: The following code demonstrates a basic example for a candlestick chart using the Canvas JS plugin. It shows stock prices of a week with vertical candlestick columns to show open, high, low, close values of datapoints.

HTML

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Canvas JS Candlestick Financial Chart </h3> 
    </div> 
  
    <div id="chartID" style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div> 
      
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
                title: { 
                    text: "Showing Stock Prices of a week" 
                }, 
                axisY: { 
                    prefix: "Rs.", 
                    title: "Stock Prices(in.Indian Rupees )", 
                }, 
                axisX: { 
                    valueFormatString: "DD MMM YY" 
                }, 
                data: [ 
                    { 
                        type: "candlestick", 
                        yValueFormatString: "Rs.##00.00", 
                        xValueFormatString: "DD MMM YY", 
                        dataPoints: [ 
                            { 
                                x: new Date(2022, 06, 01), 
                                y: [21.000787, 36.100091, 33.000888, 37.111222] 
                            }, 
                            { 
                                x: new Date(2022, 06, 02), 
                                y: [34.080002, 36.060001, 33.410000, 36.060001] 
                            }, 
                            { 
                                x: new Date(2022, 06, 03), 
                                y: [40.250001, 41.500000, 37.540009, 41.880001] 
                            }, 
                            { 
                                x: new Date(2022, 06, 04), 
                                y: [24.250001, 40.890002, 39.000111, 40.091234] 
                            }, 
                            { 
                                x: new Date(2022, 06, 05), 
                                y: [17.256777, 23.099888, 22.000333, 25.111333] 
                            }, 
                            { 
                                x: new Date(2022, 06, 06), 
                                y: [18.710001, 34.700005, 32.099002, 34.000111] 
                            }, 
                            { 
                                x: new Date(2022, 06, 07), 
                                y: [21.100002, 42.099888, 43.890002, 44.000234] 
                            } 
                        ] 
                    } 
                ],// end data                                 
            });// end chart 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the simple OHLC charts which are very similar to candlestick charts other than the tick marks to the left and right side of the vertical line showing opening and closing prices. Only a few datapoints are added for demonstration. The developer can set other options and add more datapoints as per the need.

HTML

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Canvas JS OHLC Financial Chart </h3> 
    </div> 
  
    <div id="chartID" style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div> 
      
    <script> 
        window.onload = function () { 
            var options = { 
                title: { 
                    text: "Showing Stock Prices" 
                }, 
                axisY: { 
                    prefix: "$", 
                    title: "Stock Prices(USD )", 
                }, 
                axisX: { 
                    valueFormatString: "DD MMM" 
                }, 
                data: [ 
                    { 
                        type: "ohlc", 
                        color: "green", 
                        indexLabel: "{x},{y}", 
                        yValueFormatString: "$##0.00", 
                        xValueFormatString: "DD MMM", 
                        dataPoints: [ 
                            { 
                                x: new Date(2022, 0, 01), 
                                y: [228.972, 237.850, 225.580, 236.750] 
                            }, 
                            { 
                                x: new Date(2022, 1, 05), 
                                y: [340.080, 360.060, 330.410, 356.060] 
                            }, 
                            { 
                                x: new Date(2022, 2, 07), 
                                y: [211.100, 222.099, 200.890, 214.001] 
                            } 
                        ] 
                    } 
                ],// End data                                 
            }// Options 
  
            var chart = new CanvasJS.Chart("chartID", options); 
  
        }// window onload 
    </script> 
</body> 
  
</html>

Output:

Example 3: We can also implement combination charts for financial analysis for example combining a candlestick chart with line charts. The following code shows stock prices along with the total revenues generated and net income.

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Canvas JS Candlestick Line Financial Chart </h3> 
    </div> 
    <div id="chartID" 
         style="height:400px; max-width:950px;  
             margin:0px auto;"> 
    </div>  
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
                title: { 
                     text: "Showing Stock Prices of a week" 
                }, 
                axisY: {                   
                    prefix: "Rs.", 
                    title: "Stock Prices(in.Indian Rupees )",             
                }, 
                axisX: {                                 
                    valueFormatString: "DD MMM YY" 
                }, 
                data: [ 
                { 
                    type: "candlestick", 
                    showInLegend: true, 
                    name: "Stock Price", 
                    yValueFormatString: "Rs.##00.00", 
                    xValueFormatString: "DD MMM YY", 
                    dataPoints: [                        
                        { x: new Date(2022,0,01), 
                          y: [21.000787, 36.100091,33.000888,37.111222] },   
                        { x: new Date(2022,01,01),  
                          y: [34.080002, 36.060001, 33.410000, 36.060001]}, 
                        { x: new Date(2022,02,01),  
                          y: [40.250001, 41.500000, 37.540009, 41.880001]}, 
                        { x: new Date(2022,03,01),  
                          y: [24.250001, 40.890002,39.000111,40.091234] }, 
                        { x: new Date(2022,04,01),  
                          y: [17.256777, 23.099888,22.000333,25.111333] }, 
                        { x: new Date(2022,05,01),  
                          y: [18.710001, 34.700005,32.099002,34.000111] },             
                        { x: new Date(2022,06,01),  
                          y: [21.100002, 42.099888,43.890002,44.000234] }, 
                        { x: new Date(2022,07,01), 
                          y: [18.710001, 34.700005,32.099002,34.000111] },             
                        { x: new Date(2022,08,01),  
                          y: [21.100002, 42.099888,43.890002,44.000234] }, 
                        { x: new Date(2022,09,01),  
                          y: [18.710001, 34.700005,32.099002,34.000111] },             
                        { x: new Date(2022,10,01),  
                          y: [21.100002, 42.099888,43.890002,44.000234] } 
                    ] 
                }, 
                { 
                    type: "line", 
                    showInLegend: true, 
                    yValueFormatString: "Rs.##00.00cr", 
                    xValueFormatString: "DD MMM YY", 
                    name: "Revenue generated", 
                    axisYType: "secondary", 
                    dataPoints:[ 
                        { x: new Date(2022,01,11), y: 25.234 },   
                        { x: new Date(2022,03,15), y: 26.010 }, 
                        { x: new Date(2022,05,18), y: 28.540 }, 
                        { x: new Date(2022,07,20), y: 29.001 }, 
                        { x: new Date(2022,09,22), y: 20.099 } 
                    ]                 
                }, 
                { 
                    type: "line", 
                    showInLegend: true, 
                    yValueFormatString: "Rs.##00.00cr", 
                    xValueFormatString: "DD MMM YY", 
                    name: "Net Income", 
                    axisYType: "secondary", 
                    dataPoints:[ 
                        { x: new Date(2022,01,11), y: 15.234 },   
                        { x: new Date(2022,03,15), y: 16.010 }, 
                        { x: new Date(2022,05,18), y: 18.540 }, 
                        { x: new Date(2022,07,20), y: 19.001 }, 
                        { x: new Date(2022,09,22), y: 18.999 } 
                    ]                     
                } 
                ],// end data 
                                  
            });// end chart 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Conclusion: We use financial charts to show price movement over a period of time with open, high, low, and close values of prices according to suitability. Any chart type chosen should provide important information which suits the project strategy.

Suggest improvement

How to Implement Area Charts using CanvasJS ?

Share your thoughts in the comments