{"id":13306,"date":"2021-09-07T05:31:27","date_gmt":"2021-09-07T05:31:27","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13306"},"modified":"2023-07-29T13:09:08","modified_gmt":"2023-07-29T13:09:08","slug":"ohlc-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/09\/07\/ohlc-chart-javascript\/","title":{"rendered":"How to Create Financial Open-High-Low-Close (OHLC) Chart Using JavaScript"},"content":{"rendered":"

\"Interactive<\/a>A stepwise guide on how to create interactive financial charts in the form of an OHLC chart. Visualizing the stock prices of Amazon over the course of Jeff Bezos’s tenure as the CEO.<\/em><\/strong><\/span><\/p>\n

Financial charts are especially useful to represent large amounts of data and identify trends. Would like to learn one such cool financial chart called the OHLC chart that visualizes stock price movement?<\/p>\n

<\/p>\n

What is an OHLC chart and what does it represent?<\/h2>\n

An OHLC chart<\/a> shows the open, high, low, and closing prices of a stock. It is a type of bar chart that is used to illustrate movements in the price of a financial instrument over time. A vertical line indicates the high and low prices while small horizontal lines on that vertical line show the open (left line) and close (right line) figures. The colour of the line indicates whether the closing price of the instrument was more or less than the opening price.<\/p>\n

Here, I have decided to plot the highs and lows of Amazon Inc. on the Nasdaq under the leadership of Jeff Bezos. Amazon has grown tremendously, and the stock price has seen a lot of ups and downs through the years.<\/p>\n

Take a look at my final OHLC chart here and hope that makes you excited to learn how to create this chart:<\/p>\n

\"Animated<\/p>\n

Creating the OHLC chart with JavaScript<\/h2>\n

Using any JavaScript library makes it faster and easier to create visualizations with their ready to use chart options. There are a lot of good JavaScript charting libraries<\/a> that can be used to make beautiful charts though not all of them may have stock charts. For this tutorial, I am using the AnyChart JS library<\/a> which has some cool financial charts under the AnyStock<\/a> umbrella.<\/p>\n

A working knowledge of HTML and JavaScript makes it easier to grasp the concepts but don\u2019t worry in case you are a total newbie too. I will show you how you can create an interactive, useful JS OHLC chart in 4 basic steps. It\u2019s time to start the session!<\/p>\n

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

To start with, I create an HTML page to hold the chart and add a block element with a unique id that I will reference later.<\/p>\n

I set the <div><\/code> to have 100% width and height which will display the OHLC chart over the whole screen. You can change these parameters to suit your requirements.<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Word Tree 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%; 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<\/body>\r\n<\/html><\/code><\/pre>\n
2. Include the necessary scripts<\/h3>\n
When using a charting library, I need to include the appropriate JS scripts of that library in the HTML page.<\/p>\n
To create an OHLC chart, I will link the AnyChart\u2019s \u2018core<\/a>\u2019 and \u2018stock<\/a>\u2019 modules.<\/p>\n
<html>\r\n  <head>\r\n    <title>JavaScript OHLC Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-stock.min.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS OHLC chart will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
3. Add the data<\/h3>\n
To load the data file, I need to add the Data Adapter module<\/a> of AnyChart and do so in the <head><\/code> section of the HTML page.<\/p>\n
For the stock chart, I take the data from Yahoo finance<\/a>. I am using weekly stock price data for Amazon from the time it was listed on the Nasdaq to the last week of June. You can download the data file here<\/a>.<\/p>\n
<script>\r\n  anychart.onDocumentReady(function () {\r\n    anychart.data.loadCsvFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/e2fd68f19e5331f87d38473a45a11dbe\/raw\/396b3e14f2d7e05aa188e0a420a7b622ed4111bd\/amzohlcweekly.csv', function (data) {\r\n      \/\/ All code here\r\n    })\r\n  });\r\n<\/script><\/code><\/pre>\n
4. Write the JavaScript code for the chart<\/h3>\n
Now that everything else is done, let\u2019s jump into writing the code to create and show the OHLC chart.<\/p>\n
The first thing I do is enclose the code inside a function called anychart.onDocumentReady()<\/code>. This is to make sure that the code will be executed only after the page is fully loaded. Then, I load the data with the anychart.data.loadJsonFile()<\/code> function.<\/p>\n
To use the data, I create a dataset table and then map the values to indicate that my data is in the sequence of open, high, low, and close data points.<\/p>\n
\/\/ create data table on loaded data\r\nvar dataTable = anychart.data.table();\r\ndataTable.addData(data);\r\n\r\n\/\/ map loaded data for the ohlc series\r\nvar mapping = dataTable.mapAs({\r\n  open: 1,\r\n  high: 2,\r\n  low: 3,\r\n  close: 4\r\n});<\/code><\/pre>\n
Next, I create the stock chart and plot it. Then, I map the data to the plot and define the grid settings. In a stock chart, it is always a good idea to keep the grid to facilitate easier reading of the chart figures.<\/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\/\/ create ohlc series\r\nplot\r\n  .ohlc()\r\n  .data(mapping)\r\n  .name('AMZ');\r\n\r\n\/\/ set grid settings\r\nplot\r\n  .yGrid(true)\r\n  .xGrid(true)\r\n  .yMinorGrid(true)\r\n  .xMinorGrid(true);<\/code><\/pre>\n
I add a scroller series under the main chart to allow a closer look at any specified range of data.<\/p>\n
Lastly, I add the title of the chart, reference the chart container and draw the chart.<\/p>\n
\/\/ create scroller series with mapped data\r\nchart.scroller().area(dataTable.mapAs({ value: 4 }));\r\n\r\n\/\/ sets the title of the chart\r\nchart.title('Amazon Inc. Stock Prices');\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 all there is to do! A functional, interactive OHLC chart is conjured up!<\/p>\n
It can be quite clearly seen that the stock prices have risen steadily with major gains after 2012 and a sharp rise in 2020.<\/p>\n