Creating Candlestick Charts in JavaScript
An interactive candlestick chart using an HTML canvas element and vanilla JavaScript
With some of the recent price records of Bitcoin and other cryptocurrencies, as well as the GameStop and AMC Reddit short squeezes, price charts have been all over the news. Especially when looking at live market data, a common way to display the information is candlestick charts.
Candlestick charts always looked very confusing to me because I never bothered to understand them. However, when I finally did, I realized they are actually quite easy and straightforward to read.
I have been doing some casual mining with NiceHash recently and because I love charts and diagrams, I decided to create my own candlestick chart solution with JavaScript, so I can create custom Bitcoin price charts.
What are candlestick charts?
I assume, most of you know what candlestick charts are and how to read them, but here is a quick overview anyway: A candle summarizes what happened to a stock/cryptocurrency price within a fixed time interval like 1 day, 1 hour, or 5 minutes.
The main body of the candle shows the opening and closing price (the price at the beginning of the time interval and the price at the end). If the closing price is above the opening price, i.e. the price has increased, the candle will be green, if the price has fallen, the candle will be red.
The “wick” (the small bar that sticks out of the candle) depicts the highest and lowest price within the interval, for example, a short price spike in the middle of the time period.
Implementation
Rather than using a third-party solution for drawing candlestick charts (for example, Google charts can draw candlestick chars), I decided to implement my own solution from scratch. While a custom implementation will have fewer features than a big library, it avoids adding another dependency to a project. Also, you can customize your own solution to a bigger degree to make it perfect for…
![Christian Behler](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect fill-opacity="0"/></svg>){kind=small}
