{"id":17000,"date":"2023-11-13T12:42:30","date_gmt":"2023-11-13T12:42:30","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17000"},"modified":"2023-11-13T13:45:28","modified_gmt":"2023-11-13T13:45:28","slug":"ohlc-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/","title":{"rendered":"OHLC Chart: Understanding &#038; Creating in JavaScript Step-by-Step"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\" alt=\"OHLC Chart in JavaScript\" width=\"100%\" class=\"alignnone size-full wp-image-17015\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png 1366w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial-300x157.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial-768x403.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial-1024x537.png 1024w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/a>Unearthing insights from vast datasets is an intricate blend of art and science. In the realm of financial analysis, a pivotal instrument for visually exploring complex data is the <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/ohlc-chart\/\">Open-High-Low-Close<\/a> (OHLC) chart. This tutorial is your roadmap to swiftly crafting your OHLC chart using JavaScript, a step-by-step journey. We&#8217;ll harness S&amp;P 500 data, and by the end of this article, you&#8217;ll possess the skills to orchestrate visual stock analysis adeptly.<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>What Is OHLC Chart?<\/h2>\n<p>Before we embark on this data visualization odyssey, let&#8217;s uncover the essence\u00a0of the OHLC chart\u00a0type.<\/p>\n<p>An OHLC chart \u2014 denoting Open, High, Low, Close \u2014 is a potent ally in financial data analysis and visualization. It can meticulously encapsulate\u00a0stock price dynamics over chosen timeframes, be it a day, an hour, or any other.<\/p>\n<p>Here&#8217;s the significance of each facet within an OHLC chart:<\/p>\n<ul>\n<li><strong>Open (O):<\/strong> The open price inaugurates the financial instrument&#8217;s price journey within the selected timeframe. It typically manifests as a horizontal mark on the chart&#8217;s left side.<\/li>\n<li><strong>High (H):<\/strong> The high price represents the zenith reached during the designated time frame, crowning the vertical line.<\/li>\n<li><strong>Low (L):<\/strong> The low price marks the nadir recorded in the same timeframe, visible at the line&#8217;s lower extremity.<\/li>\n<li><strong>Close (C):<\/strong> The close price is the finale, signaling the financial instrument&#8217;s value at the selected timeframe&#8217;s closure. It is often depicted as a horizontal mark on the chart&#8217;s right side.<\/li>\n<\/ul>\n<p>In summary, each vertical line in an OHLC chart delineates the price range during a specific time segment. The line&#8217;s height is dictated by the highest and lowest prices, while the left and right marks signify the opening and closing prices, respectively. OHLC charts serve as indispensable tools for traders and analysts to decipher price trends, gauge price volatility, and pinpoint vital support and resistance levels \u2014 making them an integral asset in financial data analysis.<\/p>\n<h2>OHLC Chart Example<\/h2>\n<p>Take a glance at an example of an OHLC chart below. Actually, it\u2019s the very creation that awaits you at the end of this tutorial \u2014 your visual guide to financial storytelling.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-6caD2Yer\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/6caD2Yer\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-6caD2Yer{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>Ready to unfurl the financial narrative through the art of OHLC chart development with JavaScript? Without further ado, let\u2019s embark on this data visualization expedition!<\/p>\n<h2>A. Building Basic OHLC Chart with JavaScript<\/h2>\n<p>Creating an OHLC chart might initially seem complex, but fret not, even if you&#8217;re new to this. I&#8217;m here to guide you through each essential step in crafting a clear and informative one. We can achieve this by following these four steps:<\/p>\n<ol>\n<li>Create a basic web page in HTML<\/li>\n<li>Include the required JavaScript files<\/li>\n<li>Load the data<\/li>\n<li>Write the OHLC charting code<\/li>\n<\/ol>\n<h3>1. Create a basic web page in HTML<\/h3>\n<p>To start, let\u2019s create an HTML page for our JS OHLC chart. Adding a <code>&lt;div&gt;<\/code> element with the ID &#8220;container&#8221; will provide a place to display the graphic.<\/p>\n<p>We can adjust the appearance of the chart by applying CSS rules within the <code>&lt;style&gt;<\/code> block. Here, we set the width and height properties to 100%, and the margin and padding to 0.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;JavaScript OHLC Chart&lt;\/title&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>2. Include the required JavaScript files<\/h3>\n<p>Now that the basic HTML structure is in place, it&#8217;s time to incorporate the JavaScript files necessary for creating our OHLC chart.<\/p>\n<p>We can add these to our project in two ways: by downloading and using them locally, or by linking to them through a Content Delivery Network (CDN). For this tutorial, let\u2019s opt for the CDN approach, including links to the essential scripts in the <code>&lt;head&gt;<\/code> section of our HTML page.<\/p>\n<p>We&#8217;ll use\u00a0<a href=\"https:\/\/www.anychart.com\/\">AnyChart\u00a0JS Charts<\/a>, and to create an OHLC chart, it\u2019s necessary to include the Core and Stock modules, as well as the Data Adapter one, which will make it easy to load data from a file.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;JavaScript OHLC Chart&lt;\/title&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  &lt;\/style&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-stock.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;script&gt;\r\n    \/\/ The entire JS code for our OHLC chart visualization will be here.\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>3. Load the data<\/h3>\n<p>Now, let&#8217;s proceed with loading our data.<\/p>\n<p>As previously mentioned, we are going to visualize the S&amp;P 500 data over time. This data is sourced from <a href=\"https:\/\/finance.yahoo.com\/quote\/%5EGSPC\/history\/?guccounter=1\" target=\"_blank\" rel=\"nofollow\">Yahoo Finance<\/a> and organized in a CSV format, accessible on my <a href=\"https:\/\/gist.githubusercontent.com\/awanshrestha\/f234904bcc41b38dc3e6cb98ee563777\/raw\/c033b77d9ae698b322a6446befee4a7ed88be10e\/SandP500Final.csv\" target=\"_blank\" rel=\"nofollow\">GitHub gist<\/a>. The CSV data contains six columns: Date, Open, High, Low, Close, and Volume, representing the date and corresponding price points for each date.<\/p>\n<p>To ensure the data integrates seamlessly into the OHLC view, we utilize the <code>anychart.data.loadCsvFile()<\/code> method powered by the Data Adapter script. Below is the code snippet we&#8217;ll use.<\/p>\n<pre><code class=\"javascript\">anychart.data.loadCsvFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/f234904bcc41b38dc3e6cb98ee563777\/raw\/c033b77d9ae698b322a6446befee4a7ed88be10e\/SandP500Final.csv\", function (data) {\r\n  \/\/ The OHLC JS code lands here.\r\n});<\/code><\/pre>\n<h3>4. Write the OHLC charting code<\/h3>\n<p>Next, we\u2019ll write a few lines of JavaScript code, and our OHLC chart will rise.<\/p>\n<p>To start, we employ the <code>anychart.onDocumentReady()<\/code> function, encapsulating all the code within it. This ensures that the code executes only after the page is fully loaded.<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The upcoming OHLC chart data and JS code will be in this section\r\n  });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Then, we load data as explained in Step 3 and create a data table with this data.<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n\r\n  \/\/ load csv data\r\n  anychart.data.loadCsvFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/f234904bcc41b38dc3e6cb98ee563777\/raw\/c033b77d9ae698b322a6446befee4a7ed88be10e\/SandP500Final.csv\", function (data) {\r\n\r\n    \/\/ create a data table\r\n    var dataTable = anychart.data.table();\r\n    dataTable.addData(data);\r\n\r\n    \/\/ The upcoming OHLC JS charting code will be here\r\n  \r\n  });\r\n\r\n});<\/code><\/pre>\n<p>As we map the columns from the data table into OHLC format, our data is completely ready.<\/p>\n<pre><code class=\"javascript\">var mapping = dataTable.mapAs({\r\n  date: 0,\r\n  open: 1,\r\n  high: 2,\r\n  low: 3,\r\n  close: 4\r\n});<\/code><\/pre>\n<p>Next, we create a stock chart instance, establish a chart plot, and add an OHLC series binding it with the mapped data.<\/p>\n<pre><code class=\"javascript\">\/\/ create a stock chart\r\nvar chart = anychart.stock();\r\n\r\n\/\/ create the chart plot\r\nvar plot = chart.plot(0);\r\n\r\n\/\/ create an ohlc series and bind it to the mapped data\r\nvar ohlcSeries = plot.ohlc(mapping);<\/code><\/pre>\n<p>While doing this, let\u2019s also set the chart to display data within a specific time range, much like zooming into a particular timeframe on a timeline.<\/p>\n<pre><code class=\"javascript\">chart.selectRange(\"2021-03-01\", \"2023-08-20\");<\/code><\/pre>\n<p>Finally, we name the chart, place it in the container created in Step 1, and render the resulting OHLC chart visualization.<\/p>\n<pre><code class=\"javascript\">\/\/ set the chart title\r\nchart.title(\"S&amp;P 500 OHLC Chart\");\r\n\r\n\/\/ set the container id for the chart\r\nchart.container(\"container\");\r\n\r\n\/\/ initiate the chart drawing\r\nchart.draw();<\/code><\/pre>\n<p>Tada! Our basic JavaScript-based OHLC chart is ready for exploration. You can find it on <a href=\"https:\/\/playground.anychart.com\/wps8hRVl\" target=\"_blank\" rel=\"nofollow\">Playground<\/a>. Additionally, for your convenience, the code is provided below.<\/p>\n<p><a href=\"https:\/\/playground.anychart.com\/wps8hRVl\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-basic.png\" alt=\"Basic OHLC Chart in JavaScript\" width=\"100%\" class=\"alignnone size-full wp-image-17013\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-basic.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-basic-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-basic-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-basic-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;JavaScript OHLC Chart&lt;\/title&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  &lt;\/style&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-stock.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;script&gt;\r\n    anychart.onDocumentReady(function () {\r\n      \/\/ load csv data\r\n      anychart.data.loadCsvFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/f234904bcc41b38dc3e6cb98ee563777\/raw\/c033b77d9ae698b322a6446befee4a7ed88be10e\/SandP500Final.csv\", function (data) {\r\n        \/\/ create a data table\r\n        var dataTable = anychart.data.table();\r\n        dataTable.addData(data);\r\n        \/\/ map the columns from the data table into the ohlc format\r\n        var mapping = dataTable.mapAs({\r\n          date: 0,\r\n          open: 1,\r\n          high: 2,\r\n          low: 3,\r\n          close: 4\r\n        });\r\n        \/\/ create a stock chart\r\n        var chart = anychart.stock();\r\n        \/\/ create the chart plot\r\n        var plot = chart.plot(0);\r\n        \/\/ create an ohlc series and bind it to the mapped data\r\n        var ohlcSeries = plot.ohlc(mapping);\r\n        \/\/ set the date\/time range displayed by default\r\n        chart.selectRange(\"2021-03-01\", \"2023-08-20\");\r\n        \/\/ set the chart title\r\n        chart.title(\"S&P 500 OHLC Chart\");\r\n        \/\/ set the container id for the chart\r\n        chart.container(\"container\");\r\n        \/\/ initiate the chart drawing\r\n        chart.draw();\r\n      });\r\n    });\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>B. Customizing OHLC Chart<\/h2>\n<p>Now that our basic JS-based OHLC chart is in place, let&#8217;s explore ways to enhance its visuals and functionality, making it more informative and visually appealing.<\/p>\n<h3>1. Color and outlook customization<\/h3>\n<p>A well-chosen color scheme can enhance the visual appeal and clarity of any chart. In this step, we&#8217;ll tweak the default shades of the chart to infuse more vibrancy into it.<\/p>\n<p>First, let\u2019s set the background color of the chart to a soothing light blueish-gray shade.<\/p>\n<pre><code class=\"javascript\">chart.background().fill(\"#edf4f5\");<\/code><\/pre>\n<p>Additionally, we can customize the color of the lines, both in normal and different states.<\/p>\n<pre><code class=\"javascript\">\/\/ customize the color of the ohlc bars\r\nohlcSeries.fallingFill(\"#ff0d0d\");\r\nohlcSeries.fallingStroke(\"#ff0d0d\");\r\nohlcSeries.risingFill(\"#43ff43\");\r\nohlcSeries.risingStroke(\"#43ff43\");\r\n\r\n\/\/ additional customization for the ohlc series\r\nohlcSeries.normal().risingStroke(\"#33ccff\");\r\nohlcSeries.hovered().risingStroke(\"#33ccff\", 1.5);\r\nohlcSeries.selected().risingStroke(\"#33ccff\", 3);\r\nohlcSeries.normal().fallingStroke(\"#ff33cc\");\r\nohlcSeries.hovered().fallingStroke(\"#ff33cc\", 1.5);\r\nohlcSeries.selected().fallingStroke(\"#ff33cc\", 3);<\/code><\/pre>\n<p>Also, let\u2019s name the series \u201cS&amp;P\u201d and customize the legend item for the OHLC series to display a rising-falling icon.<\/p>\n<pre><code class=\"javascript\">\/\/ name the ohlc series\r\nohlcSeries.name(\"S&amp;P\");\r\n\r\n\/\/ customize the legend item for the ohlc series\r\n\/\/ to display a rising\/falling icon\r\nohlcSeries.legendItem().iconType(\"rising-falling\");<\/code><\/pre>\n<p><a href=\"https:\/\/playground.anychart.com\/SlIbXAcH\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-1.png\" alt=\"Custom OHLC Chart in JavaScript 1\" width=\"100%\" class=\"alignnone size-full wp-image-17012\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-1.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-1-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-1-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-1-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<h3>2. Add Date Range Selection UI<\/h3>\n<p>While there is already a scroller at the bottom of the OHLC visualization to select the date range, we can still improve the navigation experience. Let\u2019s add a date range picker and a range selector, enhancing the chart\u2019s UI.<\/p>\n<pre><code class=\"javascript\">\/\/ create a date range picker\r\nvar rangePicker = anychart.ui.rangePicker();\r\nrangePicker.render(chart);\r\n\r\n\/\/ create a date range selector\r\nvar rangeSelector = anychart.ui.rangeSelector();\r\nrangeSelector.render(chart);<\/code><\/pre>\n<p><a href=\"https:\/\/playground.anychart.com\/cTxzdZ4E\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-2.png\" alt=\"Custom OHLC Chart in JavaScript  2\" width=\"100%\" class=\"alignnone size-full wp-image-17011\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-2.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-2-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-2-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-2-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<h3>3. Integrate event markers<\/h3>\n<p>World affairs and events play a significant role in stock market prices, so it can make sense to highlight specific dates and mark these events directly within the OHLC chart.<\/p>\n<p>Below is how we can add event markers precisely, with data points for individual events, including symbols, dates, descriptions, and styling attributes for normal, hovered, and selected states.<\/p>\n<pre><code class=\"javascript\">\/\/ add event markers\r\nplot.eventMarkers({\r\n  \"groups\": [\r\n    {\r\n      \"data\": [\r\n        {\r\n          \"symbol\": \"1\",\r\n          \"date\": \"2020-03-11\",\r\n          \"description\": \"The WHO declares COVID-19 a global pandemic\",\r\n          \"normal\": {\r\n            \"type\": \"rect\", \"width\": 40,\r\n            \"fill\": \"#ead9d1\", \"stroke\": \"2 #990033\",\r\n            \"fontColor\": \"#990033\", \"fontWeight\": 600,\r\n            \"connector\": { \"stroke\": \"2 #990033\" }\r\n          }\r\n        },\r\n        {\r\n          \"symbol\": \"2\",\r\n          \"date\": \"2021-03-08\",\r\n          \"description\": \"The first COVID-19 vaccine is approved for use in the U.S.\",\r\n          \"normal\": {\r\n            \"type\": \"circle\",\r\n            \"fill\": \"#d1ead9\", \"stroke\": \"2 #009933\",\r\n            \"fontColor\": \"#009933\", \"fontWeight\": 600,\r\n            \"connector\": { \"stroke\": \"2 #009933\" }\r\n          }\r\n        },\r\n        {\r\n          \"symbol\": \"3\",\r\n          \"date\": \"2022-02-24\",\r\n          \"description\": \"Russia starts a military operation in Ukraine\",\r\n          \"normal\": {\r\n            \"type\": \"rect\", \"width\": 40,\r\n            \"fill\": \"#ead9d1\", \"stroke\": \"2 #990033\",\r\n            \"fontColor\": \"#990033\", \"fontWeight\": 600,\r\n            \"connector\": { \"stroke\": \"2 #990033\" }\r\n          }\r\n        },\r\n        {\r\n          \"symbol\": \"4\",\r\n          \"date\": \"2023-05-03\",\r\n          \"description\": \"The Federal Reserve announces a rate hike to combat inflation, exceeding 5%\",\r\n          \"normal\": {\r\n            \"type\": \"circle\",\r\n            \"fill\": \"#d1ead9\", \"stroke\": \"2 #009933\",\r\n            \"fontColor\": \"#009933\", \"fontWeight\": 600,\r\n            \"connector\": { \"stroke\": \"2 #009933\" }\r\n          },\r\n          \"hovered\": {\r\n            \"fill\": \"white\", \"stroke\": \"2 #990033\",\r\n            \"fontColor\": \"#990033\",\r\n            \"connector\": { \"stroke\": \"2 #990033\" }\r\n          },\r\n          \"selected\": {\r\n            \"fill\": \"white\", \"stroke\": \"2 #4d1a00\",\r\n            \"fontColor\": \"#4d1a00\",\r\n            \"connector\": { \"stroke\": \"2 #4d1a00\" }\r\n          }\r\n        },\r\n      ]\r\n    }\r\n  ]\r\n});\r\n\r\n\/\/ set the event marker symbol\r\nplot.eventMarkers().format(function () {\r\n  return this.getData(\"symbol\");\r\n});<\/code><\/pre>\n<p><a href=\"https:\/\/playground.anychart.com\/Zzh0IJnn\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-3.png\" alt=\"Custom OHLC Chart in JavaScript 3\" width=\"100%\" class=\"alignnone size-full wp-image-17010\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-3.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-3-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-3-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-3-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<h3>4. Add annotations<\/h3>\n<p>Annotations can be greatly helpful in providing additional context, emphasizing specific points or areas to enhance data interpretation. They are particularly useful for explaining trends or outliers, making charts more insightful and easier to understand.<\/p>\n<p>To add annotations, start by creating an annotation object.<\/p>\n<pre><code class=\"javascript\">var annotation = plot.annotations();<\/code><\/pre>\n<p>Next, let\u2019s create a rectangle annotation with specified coordinates, stroke, and fill properties. The rectangle will mark a particular area on the plot between two dates and two values, with defined stroke and fill colors.<\/p>\n<pre><code class=\"javascript\">annotation.rectangle({\r\n  xAnchor: \"2022-02-24\",\r\n  valueAnchor: 3491,\r\n  secondXAnchor: \"2022-06-04\",\r\n  secondValueAnchor: 4637,\r\n  stroke: \"3 #e65a37\",\r\n  fill: \"#e65a37 0.25\"\r\n});<\/code><\/pre>\n<p>Following this, we create a text label annotation to provide additional information.<\/p>\n<pre><code class=\"javascript\">annotation.label()\r\n  .xAnchor(\"2022-02-24\")\r\n  .valueAnchor(4900)\r\n  .anchor(\"left-top\")\r\n  .offsetY(5)\r\n  .padding(6)\r\n  .text(\"First 100 days since Ukraine was attacked\")\r\n  .fontColor(\"#fff\")\r\n  .background({\r\n    fill: \"#e65a37 0.75\",\r\n    stroke: \"0.5 #2d2d2d\",\r\n    corners: 2\r\n});<\/code><\/pre>\n<p><a href=\"https:\/\/playground.anychart.com\/2zcUN8H6\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-4.png\" alt=\"Custom OHLC Chart in JavaScript 4\" width=\"100%\" class=\"alignnone size-full wp-image-17009\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-4.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-4-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-4-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-4-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<h3>5. Add KDJ indicator<\/h3>\n<p>In the realm of technical analysis, numerous indicators aid in the evaluation of stock trends. Let&#8217;s explore how to integrate the KDJ indicator, a popular tool for analyzing and predicting stock trends, helping identify potential buy and sell signals.<\/p>\n<p>To begin, we create a new plot specifically for displaying the KDJ indicator.<\/p>\n<pre><code class=\"javascript\">var kdjPlot = chart.plot(1);<\/code><\/pre>\n<p>To calculate the KDJ indicator, we need specific data points, typically high, low, and closing prices. We map these data points from the original data table to use with the KDJ indicator.<\/p>\n<pre><code>var kdjMapping = dataTable.mapAs({\r\n  high: 2,\r\n  low: 3,\r\n  close: 4\r\n});<\/code><\/pre>\n<p>We then create the KDJ indicator itself, specifying the mapping and the default periods for %K, %D, and %J.<\/p>\n<pre><code class=\"javascript\">var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);\r\n\/\/ (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)\r\nkdj.kSeries().stroke(\"purple\"); \/\/ customize the %k line color\r\nkdj.dSeries().stroke(\"green\");  \/\/ customize the %d line color\r\nkdj.jSeries().stroke(\"orange\"); \/\/ customize the %j line color<\/code><\/pre>\n<p>To ensure the KDJ plot is displayed appropriately, we can set its height.<\/p>\n<pre><code class=\"javascript\">kdjPlot.height(\"20%\");<\/code><\/pre>\n<p><a href=\"https:\/\/playground.anychart.com\/D1iDRZYy\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-customized-5.png\" alt=\"Custom OHLC Chart in JavaScript 5\" width=\"100%\" class=\"alignnone size-full wp-image-17009\" \/><\/a><\/p>\n<h3>6. Display volume data in the scroller<\/h3>\n<p>The scroller is enabled by default at the bottom of an OHLC stock chart and is used for navigation through time. It\u2019s possible to incorporate a series into it to enhance its functionality.<\/p>\n<p>For instance, let\u2019s supply the scroller with a series representing volume data.<\/p>\n<p>We first map the volume data to the scroller.<\/p>\n<pre><code class=\"javascript\">var volumeMapping = dataTable.mapAs({\r\n  \"value\": 5\r\n});<\/code><\/pre>\n<p>Then we integrate the volume data into the scroller, making it appear as a line series.<\/p>\n<pre><code class=\"javascript\">chart.scroller().line(volumeMapping);<\/code><\/pre>\n<p>Our final JavaScript (HTML5) OHLC chart is complete after all these steps! Feel free to check it out with the full code below, as well as on <a href=\"https:\/\/playground.anychart.com\/6caD2Yer\" target=\"_blank\" rel=\"nofollow\">Playground<\/a> where you can make further changes as needed and continue experimenting with various other features (get inspired by the <a href=\"https:\/\/www.anychart.com\/products\/anystock\/gallery\/\">stock chart gallery<\/a> and the <a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Overview\" target=\"_blank\" rel=\"nofollow\">stock chart documentation<\/a>).<\/p>\n<p><a href=\"https:\/\/playground.anychart.com\/6caD2Yer\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-final.png\" alt=\"Final OHLC Chart\" width=\"100%\" class=\"alignnone size-full wp-image-17007\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-final.png 1159w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-final-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-final-768x425.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-final-1024x566.png 1024w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;JavaScript OHLC Chart&lt;\/title&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  &lt;\/style&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-stock.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;script&gt;\r\n    anychart.onDocumentReady(function () {\r\n      \/\/ load csv data\r\n      anychart.data.loadCsvFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/f234904bcc41b38dc3e6cb98ee563777\/raw\/c033b77d9ae698b322a6446befee4a7ed88be10e\/SandP500Final.csv\", function (data) {\r\n        \/\/ create a data table\r\n        var dataTable = anychart.data.table();\r\n        dataTable.addData(data);\r\n        \/\/ map the columns from the data table into the ohlc format\r\n        var mapping = dataTable.mapAs({\r\n          date: 0,\r\n          open: 1,\r\n          high: 2,\r\n          low: 3,\r\n          close: 4\r\n        });\r\n        \/\/ add the volume data mapping\r\n        var volumeMapping = dataTable.mapAs({\r\n          \"value\": 5\r\n        });\r\n        \/\/ create a stock chart\r\n        var chart = anychart.stock();\r\n        \/\/ create the chart plot\r\n        var plot = chart.plot(0);\r\n        \/\/ create an ohlc series and bind it to the mapped data\r\n        var ohlcSeries = plot.ohlc(mapping);\r\n        \/\/ set the chart background color\r\n        chart.background().fill(\"#edf4f5\");\r\n        \/\/ add the volume data as the scroller series\r\n        chart.scroller().line(volumeMapping);\r\n        \/\/ customize the color of the ohlc bars\r\n        ohlcSeries.fallingFill(\"#ff0d0d\");\r\n        ohlcSeries.fallingStroke(\"#ff0d0d\");\r\n        ohlcSeries.risingFill(\"#43ff43\");\r\n        ohlcSeries.risingStroke(\"#43ff43\");\r\n        \/\/ additional customization for the ohlc series\r\n        ohlcSeries.normal().risingStroke(\"#33ccff\");\r\n        ohlcSeries.hovered().risingStroke(\"#33ccff\", 1.5);\r\n        ohlcSeries.selected().risingStroke(\"#33ccff\", 3);\r\n        ohlcSeries.normal().fallingStroke(\"#ff33cc\");\r\n        ohlcSeries.hovered().fallingStroke(\"#ff33cc\", 1.5);\r\n        ohlcSeries.selected().fallingStroke(\"#ff33cc\", 3);\r\n        \/\/ name the ohlc series\r\n        ohlcSeries.name(\"S&P\");\r\n        \/\/ customize the legend item for the ohlc series\r\n        \/\/ to display a rising\/falling icon\r\n        ohlcSeries.legendItem().iconType(\"rising-falling\");\r\n        \/\/ create a date range picker\r\n        var rangePicker = anychart.ui.rangePicker();\r\n        rangePicker.render(chart);\r\n        \/\/ create a date range selector\r\n        var rangeSelector = anychart.ui.rangeSelector();\r\n        rangeSelector.render(chart);\r\n        \/\/ add event markers\r\n        plot.eventMarkers({\r\n          \"groups\": [\r\n            {\r\n              \"data\": [\r\n                {\r\n                  \"symbol\": \"1\",\r\n                  \"date\": \"2020-03-11\",\r\n                  \"description\": \"The WHO declares COVID-19 a global pandemic\",\r\n                  \"normal\": {\r\n                    \"type\": \"rect\", \"width\": 40,\r\n                    \"fill\": \"#ead9d1\", \"stroke\": \"2 #990033\",\r\n                    \"fontColor\": \"#990033\", \"fontWeight\": 600,\r\n                    \"connector\": { \"stroke\": \"2 #990033\" }\r\n                  }\r\n                },\r\n                {\r\n                  \"symbol\": \"2\",\r\n                  \"date\": \"2021-03-08\",\r\n                  \"description\": \"The first COVID-19 vaccine is approved for use in the U.S.\",\r\n                  \"normal\": {\r\n                    \"type\": \"circle\",\r\n                    \"fill\": \"#d1ead9\", \"stroke\": \"2 #009933\",\r\n                    \"fontColor\": \"#009933\", \"fontWeight\": 600,\r\n                    \"connector\": { \"stroke\": \"2 #009933\" }\r\n                  }\r\n                },\r\n                {\r\n                  \"symbol\": \"3\",\r\n                  \"date\": \"2022-02-24\",\r\n                  \"description\": \"Russia starts a military operation in Ukraine\",\r\n                  \"normal\": {\r\n                    \"type\": \"rect\", \"width\": 40,\r\n                    \"fill\": \"#ead9d1\", \"stroke\": \"2 #990033\",\r\n                    \"fontColor\": \"#990033\", \"fontWeight\": 600,\r\n                    \"connector\": { \"stroke\": \"2 #990033\" }\r\n                  }\r\n                },\r\n                {\r\n                  \"symbol\": \"4\",\r\n                  \"date\": \"2023-05-03\",\r\n                  \"description\": \"The Federal Reserve announces a rate hike to combat inflation, exceeding 5%\",\r\n                  \"normal\": {\r\n                    \"type\": \"circle\",\r\n                    \"fill\": \"#d1ead9\", \"stroke\": \"2 #009933\",\r\n                    \"fontColor\": \"#009933\", \"fontWeight\": 600,\r\n                    \"connector\": { \"stroke\": \"2 #009933\" }\r\n                  },\r\n                  \"hovered\": {\r\n                    \"fill\": \"white\", \"stroke\": \"2 #990033\",\r\n                    \"fontColor\": \"#990033\",\r\n                    \"connector\": { \"stroke\": \"2 #990033\" }\r\n                  },\r\n                  \"selected\": {\r\n                    \"fill\": \"white\", \"stroke\": \"2 #4d1a00\",\r\n                    \"fontColor\": \"#4d1a00\",\r\n                    \"connector\": { \"stroke\": \"2 #4d1a00\" }\r\n                  }\r\n                },\r\n              ]\r\n            }\r\n          ]\r\n        });\r\n        \/\/ set the event marker symbol\r\n        plot.eventMarkers().format(function () {\r\n          return this.getData(\"symbol\");\r\n        });\r\n        \/\/ create annotations\r\n        var annotation = plot.annotations();\r\n        \/\/ create a rectangle annotation\r\n        annotation.rectangle({\r\n          xAnchor: \"2022-02-24\",\r\n          valueAnchor: 3491,\r\n          secondXAnchor: \"2022-06-04\",\r\n          secondValueAnchor: 4637,\r\n          stroke: \"3 #e65a37\",\r\n          fill: \"#e65a37 0.25\"\r\n        });\r\n        \/\/ create a text label annotation\r\n        annotation.label()\r\n          .xAnchor(\"2022-02-24\")\r\n          .valueAnchor(4900)\r\n          .anchor(\"left-top\")\r\n          .offsetY(5)\r\n          .padding(6)\r\n          .text(\"First 100 days since Ukraine was attacked\")\r\n          .fontColor(\"#fff\")\r\n          .background({\r\n            fill: \"#e65a37 0.75\",\r\n            stroke: \"0.5 #2d2d2d\",\r\n            corners: 2\r\n          });\r\n        \/\/ create a kdj indicator plot\r\n        var kdjPlot = chart.plot(1);\r\n        \/\/ map the necessary data for the kdj calculation\r\n        var kdjMapping = dataTable.mapAs({\r\n          high: 2,\r\n          low: 3,\r\n          close: 4\r\n        });\r\n        \/\/ create a kdj indicator\r\n        var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);\r\n        \/\/ (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)\r\n        kdj.kSeries().stroke(\"purple\"); \/\/ customize the %k line color\r\n        kdj.dSeries().stroke(\"green\");  \/\/ customize the %d line color\r\n        kdj.jSeries().stroke(\"orange\"); \/\/ customize the %j line color\r\n        \/\/ set the kdj plot's height\r\n        kdjPlot.height(\"20%\");\r\n        \/\/ set the date\/time range displayed by default\r\n        chart.selectRange(\"2021-03-01\", \"2023-08-20\");\r\n        \/\/ set the chart title\r\n        chart.title(\"S&P 500 OHLC Chart\");\r\n        \/\/ set the container id for the chart\r\n        chart.container(\"container\");\r\n        \/\/ initiate the chart drawing\r\n        chart.draw();\r\n      });\r\n    });\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>Delving into the world of OHLC charts might have appeared daunting initially, but in just a few minutes, we\u2019ve created a stunning one using JavaScript. I hope this tutorial has been enlightening and enjoyable, and that it has equipped you with the skills to create and customize interactive OHLC charts for your specific needs.<\/p>\n<p>The stage is now set for you to explore and tailor these charts further to align with your distinct requirements. If you ever find yourself in need of assistance or have any questions, don&#8217;t hesitate to reach out. I&#8217;m here to help you on your charting journey.<\/p>\n<p>Happy charting!<\/p>\n<hr \/>\n<p><strong><em>We are thankful to Awan Shrestha for creating this great JS OHLC chart tutorial as a guest post for our blog.<\/p>\n<p>Check out more <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a>.<\/p>\n<p>Got a guest post idea? <a href=\"https:\/\/www.anychart.com\/support\/\">Let\u2019s make it work<\/a>!<\/em><\/strong><\/p>\n<hr \/>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Unearthing insights from vast datasets is an intricate blend of art and science. In the realm of financial analysis, a pivotal instrument for visually exploring complex data is the Open-High-Low-Close (OHLC) chart. This tutorial is your roadmap to swiftly crafting your OHLC chart using JavaScript, a step-by-step journey. We&#8217;ll harness S&amp;P 500 data, and by [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,18,263,8,19,23,13,279,20,4],"tags":[843,619,618,2033,93,265,267,3219,268,1758,3149,284,1273,2012,282,471,266,620,1292,880,806,3352,509,2171,2220,2838,54,1389,1760,2757,256,3377,1111,844,165,313,1370,133,774,775,3614,1498,47,912,805,1762,913,2013,2014,32,55,2979,167,146,433,151,36,907,141,249,3111,81,57,1238,142,96,99,3586,58,65,56,101,3526,911,2387,2388,199,2841,1961,3615,3616,3601,200,37,910,920,1958,1959,1960,3606,3099,3220,248,172,807,808,954,3100,293,899,2816,1763,804,3218],"class_list":["post-17000","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-anystock","category-big-data","category-business-intelligence","category-financial-charts","category-html5","category-javascript","category-javascript-chart-tutorials","category-stock-charts","category-tips-and-tricks","tag-advanced-data-visualization","tag-analysis","tag-analytics","tag-annotations","tag-anystock","tag-big-data","tag-big-data-applications","tag-big-data-apps","tag-big-data-tools","tag-chart-design","tag-chart-development","tag-chart-examples","tag-csv","tag-csv-data-visualization","tag-data","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-graphic","tag-data-graphics","tag-data-vis","tag-data-visual","tag-data-visualisation","tag-data-visualization","tag-data-visualization-best-pracices","tag-data-visualization-design","tag-data-visualization-development","tag-data-visualization-examples","tag-data-visualization-guide","tag-data-visualization-practice","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-dataviz","tag-dataviz-examples","tag-dataviz-projects","tag-event-markers","tag-example","tag-financial-charts","tag-financial-data","tag-front-end-development","tag-guest-post","tag-historical-stock-prices","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-information-graphics","tag-interactive-charts","tag-interactive-data-visualization","tag-interactive-graphics","tag-interactive-visualizations","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-features","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-graph","tag-javascript-graphics","tag-javascript-graphics-library","tag-javascript-library","tag-js","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-graphics","tag-js-library","tag-js-stock-chart","tag-market-data","tag-market-data-visualization","tag-ohlc-chart","tag-open-high-low-close-chart","tag-sp","tag-sp-data","tag-sp-data-visualization","tag-stock","tag-stock-chart","tag-stock-charts","tag-stock-data","tag-stock-exchange-data","tag-stock-market","tag-stock-market-data","tag-stock-market-data-visualization","tag-stock-plot","tag-storytelling-examples","tag-technical-analysis","tag-technical-indicators","tag-tutorial","tag-visual-analysis","tag-visual-analytics","tag-visual-data-analytics","tag-visual-storytelling-examples","tag-visualization","tag-visualizations","tag-web-design","tag-web-developers","tag-web-development","tag-yahoo-finance","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>OHLC Chart: Understanding &amp; Creating in JavaScript Step-by-Step<\/title>\n<meta name=\"description\" content=\"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an OHLC Chart in JS\" \/>\n<meta property=\"og:description\" content=\"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-13T12:42:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-13T13:45:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\" \/>\n<meta name=\"author\" content=\"Awan Shrestha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create an OHLC Chart in JS\" \/>\n<meta name=\"twitter:description\" content=\"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Awan Shrestha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\"},\"author\":{\"name\":\"Awan Shrestha\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"headline\":\"OHLC Chart: Understanding &#038; Creating in JavaScript Step-by-Step\",\"datePublished\":\"2023-11-13T12:42:30+00:00\",\"dateModified\":\"2023-11-13T13:45:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\"},\"wordCount\":1629,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\",\"keywords\":[\"advanced data visualization\",\"analysis\",\"analytics\",\"annotations\",\"AnyStock\",\"big data\",\"big data applications\",\"big data apps\",\"big data tools\",\"chart design\",\"chart development\",\"chart examples\",\"CSV\",\"CSV data visualization\",\"data\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data chart\",\"data charting\",\"data charts\",\"data graphic\",\"data graphics\",\"data vis\",\"data visual\",\"data visualisation\",\"Data Visualization\",\"data visualization best practices\",\"data visualization design\",\"data visualization development\",\"data visualization examples\",\"data visualization guide\",\"data visualization practice\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"dataviz\",\"dataviz examples\",\"dataviz projects\",\"event markers\",\"example\",\"Financial charts\",\"financial data\",\"front-end development\",\"guest post\",\"historical stock prices\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"information graphics\",\"interactive charts\",\"interactive data visualization\",\"interactive graphics\",\"interactive visualizations\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting features\",\"JavaScript charting library\",\"javascript charts\",\"javascript graph\",\"javascript graphics\",\"JavaScript graphics library\",\"JavaScript library\",\"js\",\"js chart\",\"js charting\",\"js charts\",\"JS graphics\",\"js library\",\"JS stock chart\",\"market data\",\"market data visualization\",\"ohlc chart\",\"open-high-low-close chart\",\"S&amp;P\",\"S&amp;P data\",\"S&amp;P data visualization\",\"stock\",\"stock chart\",\"Stock charts\",\"stock data\",\"stock exchange data\",\"stock market\",\"stock market data\",\"stock market data visualization\",\"stock plot\",\"storytelling examples\",\"technical analysis\",\"technical indicators\",\"tutorial\",\"visual analysis\",\"visual analytics\",\"visual data analytics\",\"visual storytelling examples\",\"visualization\",\"visualizations\",\"web design\",\"web developers\",\"web development\",\"Yahoo Finance\"],\"articleSection\":[\"AnyChart Charting Component\",\"AnyStock\",\"Big Data\",\"Business Intelligence\",\"Financial Charts\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Stock Charts\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\",\"name\":\"OHLC Chart: Understanding & Creating in JavaScript Step-by-Step\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\",\"datePublished\":\"2023-11-13T12:42:30+00:00\",\"dateModified\":\"2023-11-13T13:45:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"description\":\"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png\",\"width\":1366,\"height\":717},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OHLC Chart: Understanding &#038; Creating in JavaScript Step-by-Step\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\",\"name\":\"Awan Shrestha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"caption\":\"Awan Shrestha\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"OHLC Chart: Understanding & Creating in JavaScript Step-by-Step","description":"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an OHLC Chart in JS","og_description":"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.","og_url":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2023-11-13T12:42:30+00:00","article_modified_time":"2023-11-13T13:45:28+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","type":"","width":"","height":""}],"author":"Awan Shrestha","twitter_card":"summary_large_image","twitter_title":"How to Create an OHLC Chart in JS","twitter_description":"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Awan Shrestha","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/"},"author":{"name":"Awan Shrestha","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"headline":"OHLC Chart: Understanding &#038; Creating in JavaScript Step-by-Step","datePublished":"2023-11-13T12:42:30+00:00","dateModified":"2023-11-13T13:45:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/"},"wordCount":1629,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","keywords":["advanced data visualization","analysis","analytics","annotations","AnyStock","big data","big data applications","big data apps","big data tools","chart design","chart development","chart examples","CSV","CSV data visualization","data","data analysis","data analytics","data analytics examples","data chart","data charting","data charts","data graphic","data graphics","data vis","data visual","data visualisation","Data Visualization","data visualization best practices","data visualization design","data visualization development","data visualization examples","data visualization guide","data visualization practice","data visualization tutorial","data visualizations","data visuals","data viz examples","dataviz","dataviz examples","dataviz projects","event markers","example","Financial charts","financial data","front-end development","guest post","historical stock prices","HTML","HTML charts","HTML5","html5 charts","information graphics","interactive charts","interactive data visualization","interactive graphics","interactive visualizations","JavaScript","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting features","JavaScript charting library","javascript charts","javascript graph","javascript graphics","JavaScript graphics library","JavaScript library","js","js chart","js charting","js charts","JS graphics","js library","JS stock chart","market data","market data visualization","ohlc chart","open-high-low-close chart","S&amp;P","S&amp;P data","S&amp;P data visualization","stock","stock chart","Stock charts","stock data","stock exchange data","stock market","stock market data","stock market data visualization","stock plot","storytelling examples","technical analysis","technical indicators","tutorial","visual analysis","visual analytics","visual data analytics","visual storytelling examples","visualization","visualizations","web design","web developers","web development","Yahoo Finance"],"articleSection":["AnyChart Charting Component","AnyStock","Big Data","Business Intelligence","Financial Charts","HTML5","JavaScript","JavaScript Chart Tutorials","Stock Charts","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/","url":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/","name":"OHLC Chart: Understanding & Creating in JavaScript Step-by-Step","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","datePublished":"2023-11-13T12:42:30+00:00","dateModified":"2023-11-13T13:45:28+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"description":"The OHLC chart type is a pivotal financial data visualization tool. Find out more about it and learn how to quickly create such graphics using JavaScript.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/11\/ohlc-chart-tutorial.png","width":1366,"height":717},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2023\/11\/13\/ohlc-chart-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"OHLC Chart: Understanding &#038; Creating in JavaScript Step-by-Step"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1","name":"Awan Shrestha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","caption":"Awan Shrestha"},"url":"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/17000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=17000"}],"version-history":[{"count":14,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/17000\/revisions"}],"predecessor-version":[{"id":17024,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/17000\/revisions\/17024"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=17000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=17000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=17000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}