Creating a Candlestick Chart

A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart. A combination of the line and bar charts, a candlestick chart represents the range of price movement for a specific time interval.

The FusionCharts Suite XT candlestick chart offers you a powerful and interactive interface to plot your stock data. It offers the following features:

  • Integrated price and volume plot, where the volume plot can be turned on or off

  • Multiple chart options for price plotting - candlestick / bar / line

  • Interactive tool tip and customizable hover bar

  • Option to plot trend lines and zones on the chart

  • Option to plot any number of custom trend sets on the chart, which can be customized to show technical indicators

  • Ability to provide missing data

  • Ability to highlight specific candles

  • Option to draw vertical indicator lines at any point on the x-axis

In this section, you will be shown how you can:

  • Create a simple candlestick chart

  • Set a chart type for the price chart

  • Set the price to plot for a line price chart

  • Show/hide the volume chart

  • Configure trend-lines, trend-sets, and vertical indicator lines

Creating a Simple Candlestick Chart

As an example, we will create a candlestick chart that shows the daily stock price for Harry’s SuperMart (stock name HRYS) for the last two months.

The candlestick chart thus created looks like this:

FusionCharts should load here..

In the chart above, the price chart is rendered in the first half of the candlestick chart while the volume chart is rendered in the second half.

Given below is a brief description of the attributes used to create a candlestick chart:

Attribute Name Description
label It is used to specify the label for the data item. The label is rendered along the x-axis.
x This attribute belongs to the category object as well as the data object. When used with the category object, it is used to specify the numerical position of a category on the x-axis. When used with the data object, it is used to specify the numerical position of a candlestick point on the x-axis.
open It is used to specify the opening price of a data item.
close It is used to specify the closing price of a data item.
high It is used to specify the highest price reached by a data item.
low It is used to specify the lowest price reached by a data item.
volume It is used to specify the volume of the transaction. If you do not specify the volume for any of the data items, the volume chart will not render.

The data structure needed to create a simple candlestick chart is given below:

...

There! You have now seen how you can create a simple candlestick chart.