How to create Candlestick Chart in Chart JS

In Chart.js we can create a candlestick chart. A candlestick chart is in essense a bar floating bar chart with a line at the top and bottom. It looks like a candle due to these lines.

Candlestick Chart with Chartjs Financial Plugin

To create a candlestick chart we need to use a specific Chart.js plugin. This plugin is called Chartjs Financial plugin or [chartjs-financial-plugin].

And it enhances the bar chart with additional datapoints which are essential for a candlestick chart. Which are the open, high, low and close (OHLC) data points. The video will show you exactly how this works.

Unique features of Candlestick Chart

A candlestick chart has some unique features that Chart.js floating bar chart does not do by default. It enhances the chart with multiple data points. The open, high, low and close (OHLC) values which are 4 separate data points for each candlestick.

The open and close values defines the bar height. While the high and low values defines the length of the so called candle wick or line at the upper and lower part of the bar. The high is associated with the upper line while the low is connected with the lower line.

Secondly, the color coding of the candlestick. The color of the candlestick depends on the open and close value of that specific day.

If the open value is lower and closes higher it is green. Which means that the stock has increased in value. If the open value is higher compare to the closing value, it becomes red. This indicates that the value has declined.