{"id":132812,"date":"2023-03-30T09:54:34","date_gmt":"2023-03-30T09:54:34","guid":{"rendered":"https:\/\/phppot.com\/?p=20611"},"modified":"2023-03-30T09:54:34","modified_gmt":"2023-03-30T09:54:34","slug":"chart-js-candlestick","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/03\/30\/chart-js-candlestick\/","title":{"rendered":"Chart JS Candlestick"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.0909090909091\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on March 30th, 2023.<\/div>\n<p>The ChartJS library provides modules for creating candlestick charts. It also supports generating OHLC (Open High Low Close) charts.<\/p>\n<p>The candlestick and OHLC charts are for showing financial data in a graph. Both these charts look mostly similar but differ in showing the \u2018open\u2019 and \u2018close\u2019 points.<\/p>\n<p>In this article, we will see JavaScript code for creating a candlestick chart using ChartJs.<\/p>\n<p>This example generates the random data for the candlestick graph on loading the page.<\/p>\n<p>We have seen many examples of creating ChartJS JavaScript charts. If you are new to the ChartJS library, <a href=\"https:\/\/phppot.com\/javascript\/chart-js-bar-chart-example\/\">how to create a bar chart<\/a> is a simple example for getting started.<\/p>\n<p><a class=\"demo\" href=\"https:\/\/phppot.com\/demo\/chart-js-candlestick\/\">View Demo<\/a><\/p>\n<h2>What is a Candlestick chart?<\/h2>\n<p>The candlestick chart represents the price movement between Open, High, Low, and Close points.<\/p>\n<p>The candlestick chart shows these 4 points as described below. See the screenshot below to get more clarity.<\/p>\n<ul>\n<li>Open and Close \u2013 in the two top and the bottom extreme of the candle body.<\/li>\n<li>High and Low- in the two top and the bottom extreme of the candlewick.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-20621\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/candlestick-price-movement.jpg\" alt=\"candlestick price movement\" width=\"150\" height=\"202\"><br \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-20614\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/chart-js-candlestick-550x310.jpg\" alt=\"chart js candlestick\" width=\"550\" height=\"310\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/chart-js-candlestick-550x310.jpg 550w, https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/chart-js-candlestick-300x169.jpg 300w, https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/chart-js-candlestick-768x433.jpg 768w, https:\/\/phppot.com\/wp-content\/uploads\/2023\/03\/chart-js-candlestick.jpg 1200w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>HTML target to include ChartJs plugin to show a candlestick chart<\/h2>\n<p>This HTML code imports the following libraries for accessing the ChartJS candlestick module.<\/p>\n<ul>\n<li>Luxon<\/li>\n<li>ChartJS<\/li>\n<li>ChartJS adaptor luxon<\/li>\n<\/ul>\n<p>It also includes the <code>chartjs-chart-finanicial.js<\/code> JavaScript that inherits the required financial chart controller and elements classes.<\/p>\n<p>An HTML canvas layer has been created to render the output candlestick chart.<\/p>\n<p>JavaScript initiates the financial class instance to generate a candlestick chart by pointing to this canvas as a target.<\/p>\n<p class=\"code-heading\">index.html<\/p>\n<pre class=\"prettyprint\"><code class=\"language-html\">&lt;html&gt; &lt;head&gt; &lt;meta charset=\"utf-8\"&gt; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt; &lt;title&gt;Chart JS Candlestick&lt;\/title&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/luxon@1.26.0\"&gt;&lt;\/script&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.0.1\/dist\/chart.js\"&gt;&lt;\/script&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-adapter-luxon@1.0.0\"&gt;&lt;\/script&gt; &lt;script src=\"chartjs-chart-financial.js\"&gt;&lt;\/script&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"form.css\"&gt;\n&lt;\/head&gt; &lt;body&gt; &lt;div class=\"phppot-container\"&gt; &lt;h1&gt;Chart.js - CandleStick chart&lt;\/h1&gt; &lt;canvas id=\"candlestick-chart\"&gt;&lt;\/canvas&gt; &lt;div&gt; Overlap with line chart: &lt;select id=\"mixed\"&gt; &lt;option value=\"true\"&gt;Yes&lt;\/option&gt; &lt;option value=\"false\" selected&gt;No&lt;\/option&gt; &lt;\/select&gt; &lt;button id=\"update\"&gt;Update&lt;\/button&gt; &lt;button id=\"randomizeData\"&gt;Render random data&lt;\/button&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;script type=\"text\/javascript\" src=\"chart-data-render.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt; &lt;\/html&gt;\n<\/code><\/pre>\n<h2>How to get and plot candlestick random data via JavaScript?<\/h2>\n<p>This JavaScript code uses the chartjs.chart.financial.js script functions to create a candlestick chart.<\/p>\n<p>It generates and uses random bar data for the chart. The random data of each bar includes a horizontal coordinate, x, and four vertical coordinates, o, h, l, and c (open, high, low, close).<\/p>\n<p>It performs the below steps during the chart generation process.<\/p>\n<ol>\n<li>It makes random bar data by taking the initial date and the number of samples.<\/li>\n<li>It makes <a href=\"https:\/\/phppot.com\/javascript\/chartjs-line-chart\/\">ChartJS line chart<\/a> data using each bar element\u2019s close points.<\/li>\n<li>It initiates the ChartJS class to set the chart type, dataset, and options as we did in other ChartJS examples.<\/li>\n<li>It sets the random bar data to the ChartJS dataset property and updates the chart instance created in step 3.<\/li>\n<li>It checks if the user sets the \u201cMixed\u201d option and adds the close points to the dataset if yes.<\/li>\n<\/ol>\n<p>Step 5 overlaps a line chart of close points on the rendered candlestick chart.<\/p>\n<p class=\"code-heading\">chart-data-render.js<\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">var barCount = 60;\nvar initialDateStr = '01 Apr 2017 00:00 Z'; var ctx = document.getElementById('candlestick-chart').getContext('2d');\nctx.canvas.width = 800;\nctx.canvas.height = 400; var barData = getRandomData(initialDateStr, barCount);\nfunction lineData() { return barData.map(d =&gt; { return { x: d.x, y: d.c } }) }; var chart = new Chart(ctx, { type: 'candlestick', data: { datasets: [{ label: 'Random Curve', data: barData }] }\n}); function randomNumber(min, max) { return Math.random() * (max - min) + min;\n} function randomBar(date, lastClose) { var open = +randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2); var close = +randomNumber(open * 0.95, open * 1.05).toFixed(2); var high = +randomNumber(Math.max(open, close), Math.max(open, close) * 1.1).toFixed(2); var low = +randomNumber(Math.min(open, close) * 0.9, Math.min(open, close)).toFixed(2); return { x: date.valueOf(), o: open, h: high, l: low, c: close }; } function getRandomData(dateStr, count) { var date = luxon.DateTime.fromRFC2822(dateStr); var data = [randomBar(date, 30)]; while (data.length &lt; count) { date = date.plus({ days: 1 }); if (date.weekday &lt;= 5) { data.push(randomBar(date, data[data.length - 1].c)); } } return data;\n}\nvar update = function () { var mixed = document.getElementById('mixed').value; var closePrice = { label: 'Close Price', type: 'line', data: null }; \/\/ put data in chart if (mixed === 'true') { closePrice = { label: 'Close Price', type: 'line', data: lineData() }; } else { } chart.config.data.datasets = [ { label: 'Random Curve', data: barData }, closePrice ] chart.update();\n};\ndocument.getElementById('update').addEventListener('click', update); document.getElementById('randomizeData').addEventListener('click', function () { barData = getRandomData(initialDateStr, barCount); update();\n});\n<\/code><\/pre>\n<p>More functionalities and features are there in the ChartJS module. It allows customizing the output candlestick chart.&nbsp; This example enables two of them.<\/p>\n<ul>\n<li>Overlap line data over the close points of the candlestick bars.<\/li>\n<li>I am reloading the candlestick with a new set of random bar data.<\/li>\n<\/ul>\n<h2>ChartJS candlestick functionalities<\/h2>\n<p>Some possible customization options for the candlestick chart are listed below.<\/p>\n<ul>\n<li>To change the bar type between candlestick and OHLC. The OHLC chart will display the \u2018open\u2019 and \u2018close\u2019 points by horizontal lines on the candle body.<\/li>\n<li>To change the scale type, border, and color.<\/li>\n<li>To allow overlapping line charts with the rendered candlestick chart to highlight the close points of the bar data.<\/li>\n<\/ul>\n<p><a class=\"demo\" href=\"https:\/\/phppot.com\/demo\/chart-js-candlestick\/\">View Demo<\/a><a class=\"download\" href=\"https:\/\/phppot.com\/downloads\/javascript\/chart-js-candlestick.zip\">Download<\/a><\/p>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/javascript\/chart-js-candlestick\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on March 30th, 2023. The ChartJS library provides modules for creating candlestick charts. It also supports generating OHLC (Open High Low Close) charts. The candlestick and OHLC charts are for showing financial data in a graph. Both these charts look mostly similar but differ in showing the \u2018open\u2019 and \u2018close\u2019 points. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":132813,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-132812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/132812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=132812"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/132812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/132813"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=132812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=132812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=132812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}