Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts

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/ 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) {
  // create the chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Untitled Masterpiece'
    },

    series: [
      {
        type: "candlestick",    //heikinashi for Heikin-Ashi chart
        name: "Ethereum",      //chart name
        id: "eth",             // chart id, useful when adding indicators and oscillators
        data: candlestick,      //data gotten from the API call above
      },
    ], 

yAxis: [
      {
        height: "100%",       // height of the candlestick chart
        visible: true,  
      }
    ]
  });
});

The above code gives us a simple candlestick with basic styling provided by Highcharts.

Stock Tools

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",           // chart id, useful when adding indicators and oscillators
        data: data,
      },
         {
        type: "abands",      //acceleration bands indicator
        id: "overlay",       // overlays use the same scale and are plotted on the same axes as the main series.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 0,           // the index of yAxis the particular series connects to
      },
      {
        type: "ao",          // awesome oscillator
        id: "oscillator",    // oscillators requires additional yAxis be created due to different data extremes.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 1,           // the index of yAxis the particular series connects to
      },
    ],
    yAxis: [
      {
        //index 0
        height: "80%",      //height of main series 80%

        resize: {
          enabled: true,     // allow resize of chart heights
        },
      },
      {
        //index 1
        top: "80%",         // oscillator series to begin at 80%
        height: "20%",      //height of oscillator series
      },
    ],

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:

{
     // general chart styles
     chart: {
      backgroundColor: "#1c1b2b",       
      borderRadius: 15,
      height: 500,
      styledMode: false,            //if true, CSS rules required for styles
    },

    // config styles for the title
    title: {
      text: "Candlestick & Awesome Oscillator", 
      style: {
        color: "#fff",
      },
    },

    // styles for range selectors
    rangeSelector: {
       // styles for range selector buttons
       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,            //The index of the button to appear pre-selected on page load.
      buttonTheme: {
        fill: "none",
        stroke: "none",
        "stroke-width": 0,
        r: 8,
        style: {
          color: "#4F6C89",
          fontWeight: "bold",
        },

        states: {
        // styles for different button states; hover, active etc
          select: {
            fill: "transparent",
            style: {
              color: "#D76F2A",
            },
          },
        },
      },

       // styles for range selector input
      inputBoxBorderColor: "#4F6C89",
      inputBoxWidth: 110,
      inputBoxHeight: 18,
      inputStyle: {
        color: "#4F6C89",
        fontWeight: "bold",
      },
      labelStyle: {
        color: "#cbd1d6",
        fontWeight: "bold",
      },
    },

    // The plotOptions is a wrapper object for config objects for each series type. Main structure/ styling can be defined here
    plotOptions: {
      series: {
        marker: {
          enabled: false,         //disables point markers on chart
        },
      },

      // config style for candlestick series
      candlestick: {                  
        lineColor: "#FB1809",       // The line color of the candlestick.
        color: "#FB1809",            // The default fill color candlestick. Can be used for falling candlesticks
        upColor: "#4EA64A",            //The fill color of the candlestick when values are rising.
        upLineColor: "#4EA64A",        // The line color for rising candlesticks.
      },

     // config style for acceleration bands indicator
      abands: {
        lineWidth: 1,
        lineColor: "#20a0b1",
        bottomLine: {
          styles: {
            lineWidth: 0.5,
            lineColor: "#fcfc27",
          },
        },
        topLine: {
          styles: {
            lineWidth: 0.5,
            lineColor: "#2efc27",
          },
        },
      },
    },

   // config styles for xAxis
    xAxis: {
      lineWidth: 0.1,
      tickColor: "#2f2952",
      crosshair: {
        color: "#8e8aac",
        dashStyle: "dash",
      },
    },

   // styles and config for yAxis
    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",
      },
    ],

   // styles and config for tooltip
    tooltip: {
      split: true,
      shape: "rect",
      shadow: false,
      valueDecimals: 2,

      // position tooltip
      positioner: function (width, height, point) {
        var chart = this.chart,
          position;

        if (point.isHeader) {
          position = {
            x: Math.max(
              // Left side limit
              0,
              Math.min(
                point.plotX + chart.plotLeft - width / 2,
                // Right side limit
                chart.chartWidth - width - chart.marginRight
              )
            ),
            y: point.plotY,
          };
        } else {
          position = {
            x: point.series.chart.plotLeft,
            y: point.series.yAxis.top - chart.plotTop,
          };
        }

        return position;
      },
    },

    // disable stocktools GUI
    stockTools: {
      gui: {
        enabled: false,
      },
    },

    // config styles for navigator
    navigator: {
      enabled: true,
      height: 50,
      margin: 10,
      outlineColor: "#8380a5",
      handles: {
        backgroundColor: "#8380a5",
        borderColor: "#e9d5d5",
      },
      xAxis: {
        gridLineColor: "#8380a5",
      },

    },

   // config styles for scrollbar
    scrollbar: {
      barBackgroundColor: "#8380a5",
      barBorderColor: "#8380a5",
      barBorderRadius: 8,
      buttonArrowColor: "#fff",
      buttonBackgroundColor: "#405466",
      rifleColor: "#fff",
      trackBackgroundColor: "#e9d5d5",
    },

    // disable credits
    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.