This tutorial will show you how to create a candlestick chart with the ApexCharts JavaScript library.

What is ApexCharts

ApexChart is a JavaScript library that can generate charts of the following types:

  • Line
  • Area
  • Candlestick
  • Heat map
  • Pie
  • Donut
  • Radar
  • Range Bar
  • Radial Bar
  • Circular Gauge

Technically the charts generated by ApexCharts are dynamically generated SVG. This means that the rendering quality is excellent even with high-resolution devices.

In terms of licensing, ApexChart is licensed under the MIT license. For this reason, you can use this library in commercial projects.

Create your first candlestick chart

This task can be logically divided into three steps.

1 – Add the data of the candles

Each candle, to be represented, needs the following information:

  • Date
  • Open Price
  • High Price
  • Low Price
  • Close Price

With ApexCharts, you have store the data of the candles in one of these three formats:

Two dimensional Array

series: [
  {
    data: [
      [1589362200000, [312.23, 313.01, 312.08, 312.84]],
      [1589362260000, [312.75, 313.48, 312.58, 313.35]]
    ],
  },
];

Single Array

series: [
  {
    data: [
      [1589362200000, 312.23, 313.01, 312.08, 312.84],
      [1589362260000, 312.23, 313.01, 312.08, 312.84],
    ],
  }
];

xy Format 

series: [
  {
    data: [
      {
        x: new Date(2020, 05, 13),
        y: [312.23, 313.01, 312.08, 312.84],
      },
      {
        x: new Date(2020, 04, 14),
        y: [312.23, 313.01, 312.08, 312.84],
      },
    ],
  },
];

Please note that the time can be expressed both as a Unix time or as an instance of Date.

2 – Create a configuration object

The candles data and all the customization options should be stored in a configuration object that is passed to the constructor.

The example below is the simplest configuration object that you can use to create a candlestick chart.

var options = {
  series: [{
    data: seriesData
  }],
  chart: {
    type: 'candlestick',
  },
  xaxis: {
    type: 'datetime',
  },
};

Let me explain what happens here. The data with the prices are passed as an array of objects in the series array.

series: [{
  data: seriesData
}],

The chart type is then defined by setting the type of chart to “candlestick”:

chart: {
  type: 'candlestick',
},

The type of the X axis is set to “datetime”.

xaxis: {
  type: 'datetime',
},

3 – Render the chart

Once you have a configuration object, you can create the instance of the chart.

Instantiate ApexCharts by providing the HTML element object used as a container of the chart as the first parameter, and the chart configuration object as the second parameter.

var chart = new ApexCharts(document.querySelector("#chart"), options);

You can now plot the chart on the page with the render() method by using this simple instruction.

chart.render();

Update the chart data

If you want to display the candles of a market session in real-time, you can easily do this with the updateSeries() method.

In the example below, an instance of ApexChart is updated with new data. Note that when updateSeries() is called, the chart is rerendered.

let seriesData = series: [
  {
    data: [
      [1589362200000, [312.23, 313.01, 312.08, 312.84]],
      [1589362200000, [312.23, 313.01, 312.08, 312.84]]
    ],
  }
];

myChart.updateSeries([{
  data: seriesData
}]);

Customize a candlestick chart

Considered the number of customization options provided by ApexCharts, in this section, I’m only going to give you an overview of the various possibilities without going much in detail on the single subjects.

Style Customizations

With the candlestick specific options or with the general options, you can change every aspect of the chart.

For example, you can change the style of the candles.

plotOptions: {
  candlestick: {
    colors: {
      upward: '#00ff00',
      downward: '#ff0000'
    },
    wick: {
      useFillColor: true,
    },
    bar: {
      horizontal: false
    }
  }
},

Enable, disable, or customize the tooltips.

tooltip: {
  enabled: true,
  x: {
    format: 'dd MMM hh:mm',
  },
},

Enable, disable, or customize the toolbar.

toolbar: {
  show: true,
  tools: {
    download: false,
  },
},

Customize the grids of the chart.

grid:{
  position: 'front',
  xaxis: {
    lines: {
      show: true
    }
  },
  yaxis: {
    lines: {
      show: true
    }
  },
  row: {
    colors: [
      '#ffffff',
      '#eeeeee'
    ],
    opacity: 1
  },
  borderColor: '#cccccc'
},

And more.

Include an additional chart to display the volume

Candlestick charts are often associated with a section used to display the volume. For obvious reason, the capital moved in a single time interval is an important data for traders.

If you are interested in displaying a volume chart associated with a candlestick chart, you have to create an additional chart of type “bar” and then sync the two charts by following the instruction provided on the Synchronized charts page.

A complete example of a candlestick chart synced with a bar chart is available on this page.

Where to get the candlestick chart data

Many different sources can be used to populate the chart data automatically. One example is the REST API provided by the IEX Cloud financial data infrastructure.

Check out the IEX Cloud REST API documentation for more information on this subject. I can anticipate that the appropriate API endpoints to generate candlestick charts are the Historical Prices endpoint and the Intraday Prices endpoint.

Please note that to perform requests on the IEX Cloud API you have to create an account and select an appropriate plan based on the amount of data that you are planning to use.