{"id":14418,"date":"2022-02-24T13:37:03","date_gmt":"2022-02-24T13:37:03","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14418"},"modified":"2022-08-13T11:10:20","modified_gmt":"2022-08-13T11:10:20","slug":"stock-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/02\/24\/stock-chart-js\/","title":{"rendered":"Building Stock Chart with JavaScript"},"content":{"rendered":"

\"Building<\/a>Data visualization<\/a> is vastly applied in various fields. One such domain is financial trading, where stock charts<\/a> are essential for smart market data analysis and decision making. Whether you invest in stocks or not, I am pretty sure that you have come across such graphics or even might need to build one right now. So, would you like to know how to make a stock chart? I\u2019m ready to show you an easy path using the Tesla stock price data and JavaScript! Come along with me throughout this tutorial and you\u2019ll learn how to quickly create elegant, interactive JS stock charts like the one you see in the picture.<\/p>\n

<\/p>\n

What Is a Stock Chart?<\/h2>\n

Most of you may know the basics, but to ensure that we are all on the same page, I will briefly tell you what a stock chart is.<\/p>\n

A stock chart basically represents the price or volume movements of a stock over time by plotting the price or volume figures over the Y-axis and the time period over the X-axis.<\/p>\n

Stock charts play a very important role in helping investors spot trends and make the right buy and sell decisions in the fast-paced financial markets.<\/p>\n

The most common chart type used to depict stocks is the candlestick stock chart. But you can also use open-high-low-close (OHLC), line, area, column, or other forms of series visualization depending on a particular case and task.<\/p>\n

Stock Chart to Be Created<\/h2>\n

Tesla is a company that is always in the news. It has grown exponentially over the years and that is pretty much reflected in its stock value over time. So, I am going to build a stock chart to showcase the price movement of Tesla Inc. for this tutorial. I will also show you how to add various technical indicators and illustrate the effect of the recent hype surrounding the selling of stocks by Elon Musk.<\/p>\n

Here is a peek at the final version of the JavaScript stock chart to get you all pumped up for the upcoming steps.<\/p>\n

\"Stock<\/p>\n

Building a Stock Chart with JavaScript<\/h2>\n

Creating an interactive stock chart from scratch can be quite a daunting task but becomes much easier and faster with an appropriate data visualization tool. For example, there are some useful JavaScript charting libraries<\/a> that have the capability to create financial graphics, and you can work with whichever suits your needs.<\/p>\n

In this tutorial, I am using one of the good ones \u2014 the AnyChart<\/a> JS library, which has some great options for stock charts<\/a> along with neat documentation<\/a> for them and is free for any non-commercial and educational use.<\/p>\n

Although it is not necessary, some skills with HTML and JavaScript can help understand the concepts faster. But everything is quite straightforward and will be vastly explained, so there is nothing to worry about even if you are a novice.<\/p>\n

The opening bell has rung, and it\u2019s time to create the stock chart!<\/p>\n

1. Make an HTML page<\/h3>\n

The first thing I do is create an HTML page to hold the chart and add a div<\/code> element to render the chart. This block element should be given a unique id so it can be referenced in the code later.<\/p>\n

I also set the styling of the div<\/code> where I define the width and height as 100% with 0 margins and padding. This will display the stock chart over the entire screen.<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Stock Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
2. Add the required scripts<\/h3>\n
Since I am using a charting library, I need to reference the appropriate JS scripts from that library for the stock chart. Remember that these scripts are included in the head<\/code> section of the HTML page.<\/p>\n
For a stock chart, I need to add multiple scripts. Firstly, I include AnyChart\u2019s \u2018core<\/a>\u2019 and \u2018stock<\/a>\u2019 modules. Next, I add the Data Adapter<\/a> module that helps load the data. Finally, I include the UI<\/a> and Exports<\/a> modules for user interface elements and to enable export features that let you save the chart as an image or extract the underlying data to a data file.<\/p>\n
For the stock UI features to work properly, I also need to link the appropriate stylesheets.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Stock Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-stock.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-ui.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-exports.min.js\"><\/script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<link href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/css\/anychart-ui.min.css\" type=\"text\/css\" rel=\"stylesheet\">\r\n\u00a0\u00a0\u00a0\u00a0<link href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/fonts\/css\/anychart-font.min.css\" type=\"text\/css\" rel=\"stylesheet\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the JS Stock Chart will come here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
3. Prepare the data<\/h3>\n
In this stock chart, I want to visualize daily stock price data for Tesla Inc. (TSLA), so I take it from Yahoo Finance<\/a> and the CSV data file here<\/a>.<\/p>\n
All the preparations are done now, so let\u2019s start the trading or in our case writing the JavaScript stock charting code!<\/p>\n
4. Write the necessary JavaScript code<\/h3>\n
To start with, I enclose the code within a function called anychart.onDocumentReady()<\/code>. This ensures that the code will not be executed till the page is fully loaded. Next, I load the data file using the anychart.data.loadCsvFile()<\/code> function.<\/p>\n
I then create a data table and add the loaded data to it but before I can use this data for my stock chart, I need to map it. Since I am creating a candlestick stock chart, I map the open, high, low, and close values.<\/p>\n
anychart.onDocumentReady(function () {\r\n  anychart.data.loadCsvFile(\r\n    'https:\/\/gist.githubusercontent.com\/shacheeswadia\/cd509e0b0c03964ca86ae7d894137043\/raw\/5f336c644ad61728dbac93026f3268b86b8d0680\/teslaDailyData.csv',\r\n    function (data) {\r\n      \/\/ create data table on loaded data\r\n      var dataTable = anychart.data.table();\r\n      dataTable.addData(data);\r\n\r\n      \/\/ map loaded data for the candlestick series\r\n      var mapping = dataTable.mapAs({\r\n        open: 1,\r\n        high: 2,\r\n        low: 3,\r\n        close: 4\r\n      });\r\n    }\r\n  );\r\n});<\/code><\/pre>\n
Now, I define the stock chart, plot it, and set the gridlines. As numbers are important when looking at stock data values, I enable all the gridlines for better readability.<\/p>\n
\/\/ create stock chart\r\nvar chart = anychart.stock();\r\n\r\n\/\/ create first plot on the chart\r\nvar plot = chart.plot(0);\r\n\r\n\/\/ set grid settings\r\nplot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);<\/code><\/pre>\n
Now comes the main part of creating the series. This is done by using the candlestick drawing function with the mapping that I defined earlier. I give the series a name and add a legend icon.<\/p>\n
var series = plot.candlestick(mapping)\r\n        .name('Tesla');\r\n\r\nseries.legendItem().iconType('rising-falling');\r\n\r\n\/\/ create scroller series with mapped data\r\nchart.scroller().candlestick(mapping);<\/code><\/pre>\n
Stock charts have values over a long period of time. So I add a scroller series under the main chart that enables the user to specify the date range and take a closer look at the values of that data. I set a one-year range for default display.<\/p>\n
To make it easier for the user, I provide both a range picker where the user can manually enter dates and a range selector where the commonly used time periods can be selected with just a click.<\/p>\n
\/\/ set chart selected date\/time range\r\nchart.selectRange('2020-11-27', '2021-11-26');\r\n\r\n\/\/ create range picker\r\nvar rangePicker = anychart.ui.rangePicker();\r\n\r\n\/\/ init range picker\r\nrangePicker.render(chart);\r\n\r\n\/\/ create range selector\r\nvar rangeSelector = anychart.ui.rangeSelector();\r\n\r\n\/\/ init range selector\r\nrangeSelector.render(chart);<\/code><\/pre>\n
Finally, I give the chart a title, reference the previously defined chart container, and draw the chart.<\/p>\n
\/\/ sets the title of the chart\r\nchart.title('Tesla Inc. Stock Chart');\r\n\r\n\/\/ set container id for the chart\r\nchart.container('container');\r\n\r\n\/\/ initiate chart drawing\r\nchart.draw();<\/code><\/pre>\n
That\u2019s the closing bell and a beautiful, functional stock chart is created!<\/p>\n