Candlestick Chart in Chart JS 3 with chartjs-financial-plugin
How to create a candlestick chart in Chart JS. Chart JS has a plugin that can draw candlestick charts. This plugin called [chartjs-financial-plugin] is great but lacks documentation as it is not well updated. Luckily just recently they supported Chart JS 3.
To create a candlestick chart we will break it down into very basic elements. The sample might be too advance for so we will simplify it completely. Create own own version with the basic blocks of Chart JS.
For this we do need to use Luxon and Chart Luxon Adapters to make it work. Let's explore how this works.
▬ Materials/References ▬▬▬▬▬▬▬▬▬▬
To keep the video short we might expect you to know parts. These parts we have explained in other videos. You can find the references here below:
Understand setup, config and render init blocks:
Starting Code:
▬ Chart JS Viewers Question Series ▬▬▬▬▬▬▬▬▬▬
This is part of the Chart JS Viewers Question series. Where to explore questions from viewers and give an answer.
▬ Got a Question? Comment! ▬▬▬▬▬▬▬▬▬▬
Got a question or special request about a specific item? Comment below and tell me your question. I will make sure to follow up on you!
▬ Find Me Here ▬▬▬▬▬▬▬▬▬▬
Blog:
Website:
Udemy Course:
Chart JS tutorials for Beginners:
🎓 Beginners Serie:
Chart JS tutorials for Intermediate:
👁️ Most Watched Chart JS Video:
⭐ Personal Favorite Chart JS Video:
Chart JS Dashboard Series:
👍 Most Liked Video Series:
Watch Part 1:
Watch Part 2:
Watch Part 3:
▬ About Us ▬▬▬▬▬▬▬▬▬▬▬▬
Why we created these #chartjs and #javascript video tutorials?
WHY
Creating charts in javascript is very rewarding but extremely challenging. The Chart JS library made it easier to render charts. However the chart js documentation is hard to understand for many. It requires a lot of different moving parts to work along. The canvas tag, javascript, arrays and Chart JS all need to be combined to draw an eye catching bar chart or line chart.
The videos explains the chart js documentation in a more visual and easy to understand way. You can follow along with the code and quickly grasp how it works. We cover the code in chart js but also what truly happens and why something happens when we write a line of code. This fundamental understanding gives clarity to you as a developer in chartjs. In short it is the Chart JS video documentation.
HOW
We answer questions from YOU (viewers) by creating an answer video that covers the questions YOU have posted in the comment section.
WHAT
Our goal is to help YOU learn how to draw charts in Chart JS by showing you in video format how to do it.
Chart JS Video Documentation Site:
▬ Chart JS 3.5.0 ▬▬▬▬▬▬▬▬▬▬▬▬
Chart JS is a javascript library to draw charts in the canvas tag on your site. Presenting data in a visual manner such as charts is more effective and appealing. All the charts are always coded in the latest Chartjs version which is as of this recording Chart JS 3.5.0.
What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.
Please continue the Point of Sales System Javascript Part 2
Have multiple videos scheduled for daily release starting tomorrow as I created shorter video to make it more digestible as the topic as it progresses becomes more advance and harder to follow as the code is becoming larger and more complex.
Thank u so much, u help me a lot <3
You’re welcome. Happy to hear it was helpful.
@Chart JS Hey bro is there any way to make the last bar realtime
@TAVO I have a video series about Chart JS Streaming which covers the chartjs-plugin-streaming and allows you to stream datapoints. This is the video playlist: https://www.youtube.com/playlist?list=PLc1g3vwxhg1WEPb_qmB18lhQJOxJrCyUh
And if you are making a stock chart with candlestick and streaming. In that case you might also want to explore the zoom and panning plugin.
A common option most stock charts have but if they want to check a historic data of the stock. Watch this videos series: https://www.youtube.com/playlist?list=PLc1g3vwxhg1Vqy3UtLymdPMKGSEgxb8on
@Chart JS Ones again thak u so much.
awesome mate, thank you
Thank you so much. I’m glad it was helpful.
Love this video, i tried to implement your awesome and simple example but i have a problem, the chart does not show candlesticks: the axis values are set correctly, but it does not show me the actual chart.
Do you have any idea of the problem? thank you
Hi Silvia, from my point of view it is hard to say but I suspect that you are missing certain cdn or files or they are in the incorrect order. If you follow all but it does not show mostlikely it cannot load the required item that is why the chart is not being drawn..
Did you added the Luxon CDN and the Luxon Adaptor CDN and the Financial Chartjs file.
If so did you have it in the correct order?
1: Luxon CDN
2: Chart.js CDN
3: Luxon Chart Adapter CDN
4. Financial Chartjs File
Try to check that or else check the console log if you see any errors.
Perhaps this Source Mapping error? https://youtu.be/Pru1dPE0ubI?t=326
@Chart JS FOUND! exactly the problem of the mapping, the error in the javascript console was marked as “warning” and I didn’t notice it… THANK YOU SO MUCH!!!!!!
@Silvia Francia Happy to hear it is solved. The mapping error is one that I personally cannot understand why it does as it does. However, glad to know it is now working.
Great video ! Thanks @Excellence in Excel .
Could you make a video about a mixed chart – candlestick and line perhaps?
Can I use it for backtesting?
Great video, a question for you, it’s possible chart candlestick combo with line?
Hi Luigi, thank you for your question. I have been searching for an option to do this that would be easy but currently there is none. As the candlestick does not support the combo feature in Chart.js 3.
The hard way would be this option.
There is a way to achieve it with a custom plugin like this: https://youtu.be/5klTWorgu3Q
To create curves you need to study the bezierCurve feature of the canvas API, chartArea and x and y scales to get the pixel starting and ending point for each line segment. This is quite tricky.
very good work. keep it up.