{"id":9923,"date":"2020-03-25T11:43:48","date_gmt":"2020-03-25T11:43:48","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=9923"},"modified":"2022-08-13T10:11:31","modified_gmt":"2022-08-13T10:11:31","slug":"js-candlestick-chart-steps","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/03\/25\/js-candlestick-chart-steps\/","title":{"rendered":"Making JS Candlestick Chart in Four Simple Steps"},"content":{"rendered":"

\"ADo you have trading data,\u00a0looking for a way to effectively visualize it for your website or app project? If so, a JS candlestick chart<\/a> could be your best pick. This tutorial will break down the process needed to create\u00a0such a chart into simple steps and provide a detailed explanation\u00a0of the code. Keep reading even if you are new to\u00a0programming,\u00a0because only a basic understanding is needed to follow along and master\u00a0such a JavaScript (HTML5) based data visualization technique.<\/p>\n

Also called a Japanese candlestick chart,\u00a0this chart type is one of the most popular forms of financial and stock data visualization.\u00a0Each candlestick\u00a0represents\u00a0information about the open, high, low, and close price of the day.\u00a0Candlestick charts are widely used in technical analysis of\u00a0price movement patterns.<\/p>\n

Complete this tutorial and you will be able to create a compelling interactive candlestick chart in JavaScript real quick, with ease.<\/p>\n

<\/p>\n

How to Create JavaScript Candlestick Chart<\/h2>\n

When it comes to JavaScript charting, there are\u00a0four basic steps usually needed to make a data visualization of almost any type:<\/p>\n

    \n
  1. Create the HTML page where the chart will be displayed.<\/li>\n
  2. Include all necessary JavaScript files.<\/li>\n
  3. Prepare the data you\u00a0want to visualize.<\/li>\n
  4. Write the JS code for the chart.<\/li>\n<\/ol>\n

    The tutorial includes four JS candlestick chart examples. Here’s how the final one will look (just so you could better imagine where we are going):<\/p>\n

    \"JS<\/p>\n

    Now, each step will be explained in detail.<\/p>\n

    Step 1: Create an HTML page<\/h3>\n

    First of all, you need to create a basic HTML page. Include a relevant title and an HTML block element (for example, <div><\/code>) to place the chart. Here, the id used has the value container.<\/code>\u00a0But feel free to use whatever makes sense to you.<\/p>\n

    The page should look as follows:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>JavaScript Candlestick Chart<\/title>\r\n  <style>\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  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    Note that you can specify the width<\/code> and height<\/code> parameters inside the <style><\/code> block to modify the space that your chart will occupy.\u00a0I have put 100%<\/code>\u00a0in both parameters and thus the chart will fill the whole page.<\/p>\n
    Step 2. Include all necessary JS files<\/h3>\n
    Second, reference all the necessary script files in the <head><\/code> section.<\/p>\n
    There are many JavaScript charting libraries<\/a> out there with ready-made features that are of great help when you want to quickly create a visualization \u2014 sometimes even\u00a0complex\u00a0one \u2014 which\u00a0would otherwise\u00a0require advanced coding experience.<\/p>\n
    In this tutorial, I will make use of AnyChart<\/a>, and to be more accurate, of AnyChart’s AnyStock JS library<\/a> specifically\u00a0made for visualizing large datasets of date and time based charts including (but actually not limited to) stock charts.<\/p>\n
    You can\u00a0either\u00a0reference the necessary scripts from\u00a0the CDN<\/a>\u00a0or download<\/a>\u00a0them for local use.<\/p>\n
    Let’s\u00a0use the CDN links. For stock candlesticks, you need to use both the anychart-core.min.js<\/code> and anychart-stock.min.js<\/code> scripts. Here’s how it looks in the HTML code:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>JavaScript Candlestick Chart<\/title>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-core.min.js\" type=\"text\/javascript\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-stock.min.js\" type=\"text\/javascript\"><\/script>\r\n  <style>\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  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n  <script>\r\n    \/\/ The candlestick code will be written here\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    Note\u00a0that there is\u00a0a script<\/code> tag\u00a0in the\u00a0<body><\/code>\u00a0section. That’s\u00a0where\u00a0I will put all the code for the JS candlestick chart.<\/p>\n
    Step 3: Prepare the data<\/h3>\n
    Load the data<\/h4>\n
    For this candlestick chart,\u00a0I chose\u00a0to visualize historical data for EUR\/USD (euro\/U.S. dollar) from Investing.com<\/a>, focusing on the time period of two years, March 2018 to March 2020. Since\u00a0the\u00a0dataset is pretty large, instead of\u00a0inserting the data directly in the .html file,\u00a0let’s\u00a0put it in a CSV file for convenience.<\/p>\n
    Here’s a sample to demonstrate how the data looks:<\/p>\n
    \"A<\/p>\n
    AnyChart has a module called Data Adapter<\/a> that allows\u00a0developers to load CSV and other file formats in a quite straightforward way. Go ahead and reference this module in the <head><\/code> section:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>JavaScript Candlestick Chart<\/title>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-core.min.js\" type=\"text\/javascript\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-stock.min.js\" type=\"text\/javascript\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\r\n  <style>\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  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n  <script>\r\n    \/\/ The candlestick code will be written here\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    Next, using the loadCsvFile()<\/code> method provided by the Data Adapter, load the data.\u00a0And then\u00a0create a data table to\u00a0apply this data\u00a0to\u00a0the chart. The code implementation looks as follows:<\/p>\n
    anychart.data.loadCsvFile(\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/candlestick-chart-tutorial\/EUR_USDHistoricalData2year.csv\", function (data) {\r\n  \r\n  var dataTable = anychart.data.table(0, 'MMM d, yyyy');\r\n  dataTable.addData(data);\r\n\r\n});<\/code><\/pre>\n
    Map the data<\/h4>\n
    Now that the data is loaded, let\u2019s use the mapAs()<\/code> function to transform the data fields into the fields of the candlestick chart.<\/p>\n
    We need five data fields:<\/p>\n
      \n
    • x<\/code>, which usually represents the date<\/li>\n
    • open<\/code>, which represents the price at the start period<\/li>\n
    • high<\/code>, which represents the highest price during this period<\/li>\n
    • low<\/code>, which represents the lowest price during this period, and<\/li>\n
    • close<\/code>, which represents the price at the end, or close, of the period<\/li>\n<\/ul>\n
      In\u00a0the CSV file,\u00a0you see that in our case open<\/code> is the second field,  high<\/code> the third, low<\/code> the fourth, and close<\/code> the first. So here’s what you should write:<\/p>\n
      var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });<\/code><\/pre>\n
      Step 4: Write the JS candlestick chart code<\/h3>\n
      Now that everything is set up, proceed to the chart code itself.<\/p>\n
      All the coding will take place inside the <script><\/code> tag. The first function that needs to be added there is the anychart.onDocumentReady<\/code>.\u00a0It will enclose all\u00a0the code and will be executed when the page is ready:<\/p>\n
      <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The candlestick code will be written here\r\n  });\r\n<\/script><\/code><\/pre>\n
      Next, include\u00a0the data from step 3:<\/p>\n
      <script>\r\n  anychart.onDocumentReady(function () {\r\n\r\n    \/\/ load data\r\n    anychart.data.loadCsvFile(\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/candlestick-chart-tutorial\/EUR_USDHistoricalData2year.csv\", function (data) {\r\n\r\n      \/\/ create a data table\r\n      var dataTable = anychart.data.table(0, 'MMM d, yyyy');\r\n      dataTable.addData(data);\r\n\r\n      \/\/ map data\r\n      var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });\r\n\r\n    });\r\n\r\n  });\r\n<\/script><\/code><\/pre>\n
      Finally, use anychart.stock()<\/code> to create a stock chart and\u00a0provide it with\u00a0the\u00a0candlestick series. Then you can specify an appropriate chart title, put the chart into the container, and command to draw it.<\/p>\n
      Done! You’ve just made your first interactive candlestick chart in HTML5 using JavaScript!<\/p>\n