Candlestick Chart

A Candlestick Chart plots high, low, opening and closing values - such as stock prices. The chart colours the candlesticks to indicate a loss or a gain.

Interactions

On hover a tooltip shows the Date, High, Low, Open and Close values for each candlestick.

Usage

The first column is the date, time or any other X-axis value. The second column is the Open value. The third column is the High value. The fourth column is the Low value. The fifth column is the Close value.

Example




	







	
		

			Date
			Open
			High
			Low
			Close
		

	
	
		

			20/03/2014
			110
			145
			75
			80
		

		

			21/03/2014
			190
			190
			135
			145
		

		

			23/03/2014
			205
			220
			160
			192
		

		

			24/03/2014
			155
			193
			140
			190
		

		

			25/03/2014
			151
			160
			120
			158
		

		

			26/03/2014
			190
			190
			118
			150
		

		

			27/03/2014
			201
			225
			170
			175
		

		

			28/03/2014
			225
			249
			198
			245
		

		

			29/03/2014
			280
			280
			225
			275
		

		

			22/03/2014
			330
			348
			277
			280
		

		

			30/03/2014
			290
			340
			240
			260
		

		

			31/03/2014
			225
			252
			198
			245
		

		

			01/04/2014
			240
			240
			175
			197
		

		

			02/04/2014
			145
			160
			140
			158
		

		

			03/04/2014
			130
			149
			123
			125
		

		

			04/04/2014
			125
			149
			88
			90
		

		

			05/04/2014
			110
			170
			108
			140
		

		

			06/04/2014
			194
			205
			148
			169
		

		

			07/04/2014
			205
			230
			174
			190
		

		

			08/04/2014
			148
			190
			140
			165
		

		

			09/04/2014
			185
			185
			130
			154
		

		

			10/04/2014
			149
			158
			101
			151
		

		

			11/04/2014
			229
			232
			162
			170
		

		

			12/04/2014
			149
			208
			125
			208
		

		

			13/04/2014
			148
			177
			120
			175
		

		

			14/04/2014
			90
			141
			86
			135
		

		

			15/04/2014
			98
			115
			52
			60
		

		

			16/04/2014
			48
			100
			44
			60
		

		

			17/04/2014
			8
			75
			8
			40
		

		

			18/04/2014
			90
			100
			44
			50
		

		

			19/04/2014
			101
			140
			78
			90
		

	








Options



The following data attributes are available for a Candlestick Chart:




 
data-fm-y-label
Adds a label to the Y axis

 
data-fm-value-prefix
Adds a prefix to the values. For example, you may wish to add  the ‘£’ symbol before each number

 
data-fm-value-suffix
Adds a suffix to each of your values. For example, you may wish to add  the ‘$’ symbol after each number

 
data-fm-include-zero
Force the y-scale to include zero

 
data-fm-date-format
Used to interpret time-series data, see the Moment.js docs for format details

 
data-fm-greyscale
Renders chart in greyscale

 
data-fm-height
Enforces an explicit height. Expects a value with CCS syntax, e.g. "250px" (see sizing guide)

 
data-fm-width
Enforces an explicit width. Expects a value with CCS syntax, e.g. "800px" (see sizing guide)

 
data-fm-enable-spillover
If "true", the candlestick chart will draw some transient elements outside of its configured height and width (see layout guide)