{"id":16861,"date":"2023-09-05T12:34:35","date_gmt":"2023-09-05T12:34:35","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16861"},"modified":"2023-09-05T14:22:20","modified_gmt":"2023-09-05T14:22:20","slug":"stock-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/09\/05\/stock-chart-javascript\/","title":{"rendered":"Stock Chart Creation in JavaScript: Step-by-Step Guide"},"content":{"rendered":"

\"Stock<\/a>Chances are, you’ve come across various stock charts, whether you’re a seasoned trader or not. If crafting your data graphics piques your interest, you’re in the right place. Welcome to this user-friendly tutorial on building an interactive stock chart using JavaScript!<\/p>\n

The JS stock chart we\u2019ll create by the end of this guide will visually compare stock prices for three tech giants \u2014 Apple, Microsoft, and Google (Alphabet) \u2014 over the past decade. It\u2019s a robust example to illustrate the stock charting process and the power of market data visualization.<\/p>\n

So, hop on board as we explore the world of stock charts and learn how to create one from scratch.<\/p>\n

<\/p>\n

Understanding Stock Charts<\/h2>\n

At its essence, a stock chart<\/a> is a visual representation that encapsulates the movements and trends in the price of financial instruments, including a listed company\u2019s stocks. These graphical tools play a pivotal role in the financial world, serving as windows into the dynamic realm of markets. Mapping out historical data points, stock charts provide valuable insights into how financial instruments have performed over a specified period.<\/p>\n

Offering a snapshot of price fluctuations, trading volumes, and other critical information, stock charts aid analysts, investors, and traders in making informed decisions. They facilitate the identification of patterns, trends, support and resistance levels, and potential trading opportunities.<\/p>\n

In the realm of financial data visualization<\/a>, stock charts serve as powerful instruments that transform raw numbers into comprehensible narratives. In the upcoming sections, we’ll leverage JavaScript to construct our very own interactive stock chart, gaining a firsthand understanding of how these visualizations come to life.<\/p>\n

Stock Chart We’ll Build<\/h2>\n

Before we proceed, take a moment to preview the anticipated appearance of the final JS stock chart. As we embark on this journey, I’ll guide you through creating an interactive stock chart, complete with event markers, annotations, and more.<\/p>\n

\"JavaScript<\/p>\n

Building JS Stock Chart<\/h2>\n

Building a stock chart might initially appear intricate, but I’m here to demonstrate how straightforward it can be. Much like you wouldn’t want to miss the opening bell of the trading day, I encourage you to focus your attention here. We’re about to embark on the journey of crafting our own interactive JavaScript-based stock chart. So, let’s roll up our sleeves and initiate the process of bringing this type of visualization to life.<\/p>\n

1. Setting up an HTML container<\/h3>\n

Let\u2019s start by creating an HTML container to house our stock chart. We\u2019ll set up a basic web page (feel free to use an existing one) and insert a <div><\/code> element with a unique ID to serve as the chart’s rendering area. Specifying the width and height of this block element as 100% will ensure the chart occupies the entire screen.<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Stock Chart (JS)<\/title>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\" style=\"width: 100%; height: 100%;\"><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
2. Including necessary scripts<\/h3>\n
Next, we need to incorporate the relevant JavaScript and CSS files into the <head><\/code> section of the HTML page.<\/p>\n
For this tutorial, I am using the AnyChart<\/a> library which has many cool options for JS stock charts<\/a>, excellent ready-to-use stock chart examples<\/a>, and great stock chart documentation<\/a> to get you started.<\/p>\n
For constructing a stock chart, we’ll include the Core and Stock modules. The Data Adapter module will make loading data from a file easy. The UI module along with the respective CSS file will be needed for user interface elements.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Stock Chart (JS)<\/title>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-stock.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart\/data-adapter.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart\/ui.min.js\"><\/script>\r\n  <link href=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/css\/anychart-ui.min.css\" type=\"text\/css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n  <div id=\"container\" style=\"width: 100%; height: 100%;\"><\/div>\r\n    \/\/ Your chart code will go here\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
3. Preparing the data<\/h3>\n
Now, let\u2019s connect our data. I have already taken stock price data for the three tech companies (Apple, Microsoft, and Google (Alphabet)) from Yahoo Finance<\/a> as three CSV data files. We\u2019ll load them using the anychart.data.loadCsvFile()<\/code> function:<\/p>\n
\/\/ for apple\r\nanychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/AAPL.csv\", function (appleData) {\r\n  \/\/ for microsoft\r\n  anychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/MSFT.csv\", function (msData) {\r\n    \/\/ for alphabet (google)\r\n    anychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/GOOG.csv\", function (googleData) {\r\n    });\r\n  });\r\n});\r\n<\/code><\/pre>\n
4. Writing the JavaScript charting code<\/h3>\n
Now that our foundation is set, let’s move on to writing the JavaScript code that will bring our stock chart visualization to life.<\/p>\n
First, we’ll encapsulate the code within the anychart.onDocumentReady()<\/code> function, ensuring it executes only when the page is fully loaded.<\/p>\n
<script type=\"text\/javascript\">\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ Your chart drawing code will go here\r\n  });\r\n<\/script>\r\n<\/code><\/pre>\n
Next, we\u2019ll add the CSV files as shown in the previous step and create three data tables, one for each tech company:<\/p>\n
\/\/ load stock data:\r\n\/\/ for apple\r\nanychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/AAPL.csv\", function (appleData) {\r\n  \/\/ for microsoft\r\n  anychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/MSFT.csv\", function (msData) {\r\n    \/\/ for alphabet (google)\r\n    anychart.data.loadCsvFile(\"https:\/\/cdn.anychart.com\/csv-data\/GOOG.csv\", function (googleData) {\r\n      \/\/ create data tables:\r\n      \/\/ for apple\r\n      let appleDataTable = anychart.data.table();\r\n      appleDataTable.addData(appleData);\r\n      \/\/ for microsoft\r\n      let msftDataTable = anychart.data.table();\r\n      msftDataTable.addData(msData);\r\n      \/\/ for alphabet (google)\r\n      let googleDataTable = anychart.data.table();\r\n      googleDataTable.addData(googleData);\r\n    });\r\n  });\r\n});\r\n<\/code><\/pre>\n
With the data tables in place, let’s proceed to create a stock chart instance and add plots for each of the tech stocks with area series (check out the list of all available stock series types<\/a>, including OHLC, candlestick, column, etc., and choose a different one if you want).<\/p>\n
It\u2019s essential to map the data points before rendering the chart. Stock data usually includes four values: open, high, low, and close. We\u2019ll specifically use the close value for our area graphs and map it to each series. Additionally, we’ll assign names to the series to identify each tech giant.<\/p>\n
\/\/ create a stock chart\r\nlet chart = anychart.stock();\r\n\/\/ create three stock plots with area series:\r\n\/\/ for apple\r\nlet firstPlot = chart.plot(0);\r\nlet appleSeries = firstPlot.area(\r\n  appleDataTable.mapAs({ value: 4 })\r\n);\r\nappleSeries.name(\"AAPL\");\r\n\/\/ for microsoft\r\nlet secondPlot = chart.plot(1);\r\nlet msftSeries = secondPlot.area(\r\n  msftDataTable.mapAs({ value: 4 })\r\n);\r\nmsftSeries.name(\"MSFT\");\r\n\/\/ for alphabet (google)\r\nlet thirdPlot = chart.plot(2);\r\nlet googleSeries = thirdPlot.area(\r\n  googleDataTable.mapAs({ value: 4 })\r\n);\r\ngoogleSeries.name(\"GOOG\u201d);\r\n<\/code><\/pre>\n
Congratulations! We\u2019ve successfully crafted an elegant JavaScript-based stock chart that visually represents the stock price data of the three tech giants over a decade. Check it out with the complete code and feel free to experiment here<\/a>.<\/p>\n