{"id":16510,"date":"2023-05-02T12:49:56","date_gmt":"2023-05-02T12:49:56","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16510"},"modified":"2023-05-18T19:41:17","modified_gmt":"2023-05-18T19:41:17","slug":"candlestick-chart-stock-analysis","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/05\/02\/candlestick-chart-stock-analysis\/","title":{"rendered":"How to Create Candlestick Chart with JavaScript for Stock Analysis"},"content":{"rendered":"

\"Candlestick<\/a>Candlestick charts are a fantastic data visualization tool for tracking the price movements of stocks over a period of time. In this tutorial, I'll show you how to create your own candlestick chart using JavaScript.<\/p>\n

We\u2019ll be using TSMC (Taiwan Semiconductor Manufacturing Company) as an example, as they're the largest contract chip maker in the world and have been making waves in the stock market recently.<\/p>\n

By the end of this tutorial, you'll be able to create your own JS candlestick charts and analyze stock trends like a pro. So, let's get started and dive into the exciting world of data visualization with JavaScript!<\/p>\n

<\/p>\n

What Is Candlestick Chart?<\/h2>\n

You may already be familiar with candlestick charts, but just in case you need a quick refresher, here's the gist: A candlestick chart, or a Japanese candlestick chart, is a type of chart used to visualize the price movement<\/a> of a stock over time. Each point on the graph represents a specific time period, and the "candle" shape is made up of a rectangular body and two wicks that extend from either end.<\/p>\n

The body of the candle represents the difference between the opening and closing prices, while the wicks represent the highest and lowest prices that occurred during that time period. The color of the candle can indicate whether the stock price went up or down during that period, with green or blue usually indicating a rise and red indicating a decline.<\/p>\n

Candlestick charts are a popular tool used by traders and analysts to identify trends and patterns in stock prices. And now, with the power of JavaScript, you can create your very own candlesticks and impress all your finance friends with your data visualization skills!<\/p>\n

Candlestick Chart Being Built<\/h2>\n

Are you ready to create your very own candlestick chart with JavaScript? I sure am! By the end of this tutorial, you'll have a beautiful graph that looks something like the one below:<\/p>\n

\"Final<\/p>\n

Exciting, right? So let's not waste any time, and get right into the fun part: building our candlestick chart!<\/p>\n

Steps to Build a Basic JS Candlestick Chart<\/h2>\n

Okay, let's get started with building our very own candlestick chart using JavaScript! Don't worry if you're new to this \u2014 I'll walk you through each step, and before you know it, you'll be a pro at it!<\/p>\n

Here's a quick list of what we'll be doing:<\/p>\n

    \n
  1. Create a basic HTML page.<\/li>\n
  2. Insert the required JS files.<\/li>\n
  3. Set the data.<\/li>\n
  4. Write some JS charting code.<\/li>\n<\/ol>\n

    Let's get started!<\/p>\n

    1. Create a Basic HTML Page<\/h3>\n

    To start things off, let's create a basic HTML page and give it the snazzy title "JavaScript Candlestick Chart." We'll add an HTML block element called <div><\/code> to contain our masterpiece, and give it a special ID attribute of "container" so we can refer to it later in the code.<\/p>\n

    To make our chart look extra slick, we'll throw in some CSS rules in the <style><\/code> block. We can set the width and height properties to 100% and the margin and padding to 0. Of course, you can always change these to suit your personal style.<\/p>\n

    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Candlestick Chart<\/title<\/span>><\/span>\r\n    <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>\r\n      html<\/span>,\r\n      body<\/span>,\r\n      #container<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    2. Insert the Required JS files<\/h3>\n
    Using JavaScript charting libraries<\/a> is an absolute game-changer when it comes to creating stunning interactive visualizations. Luckily, you don't need to be a technical wizard to use them. For this tutorial, we'll be working with AnyChart<\/a>, which has detailed documentation<\/a> (e.g., candlestick here<\/a> and stock candlestick here<\/a>), and does not require a fee for non-commercial use.<\/p>\n
    Next up, we need to insert the required JS files. This is where the beauty of CDNs (Content Delivery Networks) comes in handy. We can simply add the links to the Core, Stock, and Data Adapter modules<\/a> in the <head><\/code> section of our HTML page. We'll also need to add the CSS links for UI and fonts to ensure our candlestick chart looks top-notch.<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Candlestick Chart<\/title<\/span>><\/span>\r\n    <link<\/span> href<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/css\/anychart-ui.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>\r\n    <link<\/span> href<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/fonts\/css\/anychart-font.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>  \r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-stock.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>\r\n      html<\/span>,\r\n      body<\/span>,\r\n      #container<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n      \/\/ All the code for the JS Candlestick chart will come here<\/span>\r\n    <\/span><\/script<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    Later on, we might need several other modules for customization.<\/p>\n
    3. Set the Data<\/h3>\n
    To set up the data for the candlestick chart, we will use the stock data of TSMC<\/a>, which I have compiled into a CSV file available at this link<\/a>. Loading the data is easy with the anychart.data.loadCsvFile()<\/code> function, which we can use to load the data from the CSV file into our chart. This function will parse the CSV file and create a data table, which will be used to plot the chart.<\/p>\n
    anychart<\/span>.data<\/span>.loadCsvFile('https<\/span>:\/\/gist<\/span>.githubusercontent<\/span>.com<\/span>\/awanshrestha<\/span>\/6481638c175e82dc6a91a499a8730057<\/span>\/raw<\/span>\/1791ef1f55f0be268479286284a0452129371003<\/span>\/TSMC<\/span>.csv'<\/span>, function<\/span> (data<\/span>) {});<\/span>\r\n<\/code><\/pre>\n
    4. Write Some JS Charting Code<\/h3>\n
    Alright, it's time to put all the pieces together and create our awesome candlestick chart for TSMC! Let's start by writing some JS code to make our chart functional.<\/p>\n
    First off, we need to wrap our code in the anychart.onDocumentReady()<\/code> function. This ensures that the code is executed only after the document has finished loading.<\/p>\n
    anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n  anychart.data.loadCsvFile(\r\n'https:\/\/gist.githubusercontent.com\/awanshrestha\/6481638c175e82dc6a91a499a8730057\/raw\/1791ef1f55f0be268479286284a0452129371003\/TSMC.csv'<\/span>,\r\n    function<\/span> (data)<\/span> <\/span>{});\r\n});\r\n<\/code><\/pre>\n
    Since candlestick charts can process table-formatted data, we create a table using the table()<\/code> method and add our data to it with the addData()<\/code> method.<\/p>\n
    var<\/span> dataTable = anychart.data<\/span>.table();<\/span>\r\ndataTable<\/span>.addData(data<\/span>);<\/span>\r\n<\/code><\/pre>\n
    But hold up, we're not done yet! We need to map our data properly to make it visually appealing. So, we use the mapAs()<\/code> function to create a new mapping object responsible for mapping the data.<\/p>\n
    var mapping = dataTable.mapAs({\r\n  open:<\/span> 1<\/span>,\r\n  high:<\/span> 2<\/span>,\r\n  low:<\/span> 3<\/span>,\r\n  close:<\/span> 4<\/span>\r\n});\r\n<\/code><\/pre>\n
    Next, we create a stock chart and a plot to represent our data.<\/p>\n
    \/\/ create a stock chart<\/span>\r\nvar<\/span> chart = anychart.stock();\r\n\/\/ create the plot<\/span>\r\nvar<\/span> plot<\/span> = chart.plot<\/span>(0);\r\n<\/code><\/pre>\n
    Moving on, we work on the grid settings and create a series for our data. Using the addSeries()<\/code> method, we configure our series name to be TSMC using the name()<\/code> function. And to add a playful touch, we use the iconType()<\/code> function to show the rise and fall of the stock markets with arrowheads pointing up and down, respectively.<\/p>\n
    \/\/ set the grid<\/span>\r\nplot.yGrid(true<\/span>).xGrid(true<\/span>).yMinorGrid(true<\/span>).xMinorGrid(true<\/span>);\r\n\/\/ create the candlestick series<\/span>\r\nvar<\/span> series = plot.candlestick(mapping);\r\nseries.name('TSMC'<\/span>);\r\nseries.legendItem().iconType('rising-falling'<\/span>);\r\n<\/code><\/pre>\n
    To give our chart a title, we use the title()<\/code> function. And finally, we specify the container of our chart as the HTML div with the id "container". And voila! Our JavaScript-based candlestick chart for TSMC is ready to be rendered with the draw()<\/code> function.<\/p>\n
    \/\/ set the title of the chart<\/span>\r\nchart<\/span>.title<\/span>('TSMC Stock Chart'<\/span>);\r\n\/\/ set the container id for the chart<\/span>\r\nchart<\/span>.container<\/span>('container'<\/span>);\r\n\/\/ initiate the chart drawing<\/span>\r\nchart<\/span>.draw<\/span>();\r\n<\/code><\/pre>\n
    And here it is. Our (first) candlestick chart for the TSMC:<\/p>\n