What is Data Visualization?
Data visualization is the practice of representing data/information in pictorial or graphical formats. It is a means by which large data sets or metrics are converted into visual elements like maps, graphs, and charts, which are much more appealing to an end-user.
The JavaScript ecosystem currently has several reliable, first-rate libraries for data visualization. Some of which include D3.js, Highcharts, Charts.js, Rechart, etc. However, in this article, we will be using Highcharts to create our charts.
Highcharts is a JavaScript library for creating SVG-based, responsive, and interactive charts for web and mobile. It provides deep customization of charts via JavaScript or CSS. Highcharts offers four product categories for creating charts. These include:
Highcharts: This is the basic Highcharts module that is required in all charts. It can be used to create simple line, bar and pie charts.
Highcharts Stock: This is used for creating general stock and timeline charts for your applications. Some examples include simple Stock charts, Candlesticks & Heikin-Ashi, OHLC. You can also make use of the Stock Tools module which provides a GUI that permits interaction with charts.
Highcharts Maps: Highcharts also provides an option to generate schematic maps which allow developers add interactive, customizable maps to their web application. It offers options to either use map collection provided by Highcharts or create custom SVG maps to suit your purpose.
Highcharts Gantt: This is a special type of bar chart used for illustrating project schedules.
We will use the Highcharts Stock to create styled candlesticks with oscillators and technical indicators provided by the Stock Tools module.
Creating the Candlestick
A candlestick chart( or Japanese candlestick chart) is a style of financial chart used by traders to determine possible price movements of a stock, security, or currency based on previous patterns. It makes use of key price points or OHLC(open, high, low, close) values taken at regular intervals for a specified period of time.
Not to be confused with the typical candlestick chart is the Heikin-Ashi('average bar') chart. Although identical to the candlestick chart, it is mostly used in conjunction with the candlestick as it helps make candlestick chart trends easier to analyze. Hence, making it more readable.
The Highcharts API provides options for creating both candlestick charts and Heikin-Ashi charts. This article focuses on candlestick charts; however, I will point out the tradeoffs required for creating an Heikin-Ashi chart along the way. Let's get our hands dirty, shall we?!
Getting Started
To begin using Highcharts, we must first download Highcharts. Highcharts provides several options to introduce Highcharts into your project. You can choose to either:
Download the entire Highcharts library. Depending on your use case, you can also download the Highcharts Stock, Maps, or Gantt libraries.
Install Highcharts via NPM and import as modules. These are best for Single Page Applications like React and Vue.
Use the Highcharts CDN to access files directly.
We will be using the Highcharts CDN for this article.
The HTML
The bulk of the HTML contains script tags used to load the Highcharts CDN. The first three are required modules for all stock charts created with Highcharts.
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Unlike candlestick charts, if you need to create a Heikin-Ashi chart, you will need to bring in the module separately as below:
<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>
The final CDN we need to bring into our application is the Stock Tools module. This enables us to make use of technical indicators. The Stock Tools module must be loaded last so it can pick up all available modules from above.
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
Rather than loading all technical indicators from the Stock Tools module, you can also load specific indicators depending on your needs:
<script src="https://code.highcharts.com/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/indicators/ema.js"></script>
<script src="https://code.highcharts.com/indicators/macd.js"></script>
Lastly, we need to create an HTML element to hold our chart that we can reference from the JavaScript:
<div id="container" style="height: 500px; min-width: 310px"></div>
The JavaScript
Bringing in our Data The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:
The first parameter, renderTo, is the DOM element or the id of the DOM element to which the chart should render.
The second parameter, options, are the options that structure the chart.
Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365',
function (candlestick) {
Highcharts.stockChart('container', {
title: {
text: 'Untitled Masterpiece'
},
series: [
{
type: "candlestick",
name: "Ethereum",
id: "eth",
data: candlestick,
},
],
yAxis: [
{
height: "100%",
visible: true,
}
]
});
});
The above code gives us a simple candlestick with basic styling provided by Highcharts.
The Highcharts Stock Tools is an optional feature in Highcharts. You can either enable the entire Stock Tools Graphical User Interface(GUI), which allows users to add indicators and oscillators based on their needs, or add specific Stock Tools to your web app via Javascript.
We will add an indicator(Acceleration bands) and an oscillator(awesome oscillator) to our chart. To do this, we need to edit both the series and yAxis objects above:
series: [
{
type: "candlestick",
name: "Ethereum",
id: "eth",
data: data,
},
{
type: "abands",
id: "overlay",
linkedTo: "eth",
yAxis: 0,
},
{
type: "ao",
id: "oscillator",
linkedTo: "eth",
yAxis: 1,
},
],
yAxis: [
{
height: "80%",
resize: {
enabled: true,
},
},
{
top: "80%",
height: "20%",
},
],
Here is what we have now:
Styling the Chart
Before we can begin styling the chart, we need to understand first the different parts that make up the chart.
Highcharts provides two ways of styling charts:
Highcharts.CSSObject: This is the default method of styling charts. It builds upon the options object within the stockChart class provided by Highcharts to define the visual appearance of individual SVG elements and HTML elements within the chart.
styledMode: boolean: This defaults to false. However, when in styled mode, no presentational attributes are applied to the SVG via the options object. Hence, CSS rules are required to style the chart.
We will be making use of the Highcharts default styling for this article. Therefore, within the options object:
{
chart: {
backgroundColor: "#1c1b2b",
borderRadius: 15,
height: 500,
styledMode: false,
},
title: {
text: "Candlestick & Awesome Oscillator",
style: {
color: "#fff",
},
},
rangeSelector: {
buttons: [
{
type: "month",
count: 1,
text: "1m",
title: "View 1 month",
},
{
type: "month",
count: 4,
text: "4m",
title: "View 4 months",
},
{
type: "month",
count: 8,
text: "8m",
title: "View 8 months",
},
{
type: "ytd",
text: "YTD",
title: "View year to date",
},
{
type: "all",
count: 1,
text: "All",
title: "View All",
},
],
selected: 2,
buttonTheme: {
fill: "none",
stroke: "none",
"stroke-width": 0,
r: 8,
style: {
color: "#4F6C89",
fontWeight: "bold",
},
states: {
select: {
fill: "transparent",
style: {
color: "#D76F2A",
},
},
},
},
inputBoxBorderColor: "#4F6C89",
inputBoxWidth: 110,
inputBoxHeight: 18,
inputStyle: {
color: "#4F6C89",
fontWeight: "bold",
},
labelStyle: {
color: "#cbd1d6",
fontWeight: "bold",
},
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
candlestick: {
lineColor: "#FB1809",
color: "#FB1809",
upColor: "#4EA64A",
upLineColor: "#4EA64A",
},
abands: {
lineWidth: 1,
lineColor: "#20a0b1",
bottomLine: {
styles: {
lineWidth: 0.5,
lineColor: "#fcfc27",
},
},
topLine: {
styles: {
lineWidth: 0.5,
lineColor: "#2efc27",
},
},
},
},
xAxis: {
lineWidth: 0.1,
tickColor: "#2f2952",
crosshair: {
color: "#8e8aac",
dashStyle: "dash",
},
},
yAxis: [
{
gridLineColor: "#201d3a",
lineWidth: 0,
visible: true,
height: "80%",
crosshair: {
dashStyle: "dash",
snap: false,
color: "#696777",
},
labels: {
align: "right",
x: -2,
},
resize: {
enabled: true,
lineWidth: 2,
lineColor: "#1d1c30",
},
},
{
top: "80%",
height: "20%",
gridLineColor: "#201d3a",
},
],
tooltip: {
split: true,
shape: "rect",
shadow: false,
valueDecimals: 2,
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
0,
Math.min(
point.plotX + chart.plotLeft - width / 2,
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY,
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop,
};
}
return position;
},
},
stockTools: {
gui: {
enabled: false,
},
},
navigator: {
enabled: true,
height: 50,
margin: 10,
outlineColor: "#8380a5",
handles: {
backgroundColor: "#8380a5",
borderColor: "#e9d5d5",
},
xAxis: {
gridLineColor: "#8380a5",
},
},
scrollbar: {
barBackgroundColor: "#8380a5",
barBorderColor: "#8380a5",
barBorderRadius: 8,
buttonArrowColor: "#fff",
buttonBackgroundColor: "#405466",
rifleColor: "#fff",
trackBackgroundColor: "#e9d5d5",
},
credits: {
enabled: false,
},
}
This is what our final chart becomes:
Conclusion
Creating styled cryptocurrency candlesticks with Highcharts allows you to transform raw data into visually compelling and actionable insights. By leveraging Highcharts’ flexibility, you can customize candlestick charts to align with your branding, enhance user experience, and effectively communicate market trends. Whether you're building a financial dashboard or enhancing a trading platform, the ability to design and implement tailored visualizations is a critical skill in today’s data-driven landscape.
With the steps outlined in this guide, you now have a foundation for working with Highcharts to create dynamic candlestick charts. Explore additional customizations and experiment with Highcharts’ extensive API to bring your cryptocurrency visualizations to the next level.
