Line Over Column Chart

A line over column chart superimposes a line chart over a column chart. The Line Over Column Chart is useful for tracking two sets of time series data: one via the line chart element; a second via corresponding groups of data for the same points in time represented by the columns. This allows the combination of continuous time series data (with the line) and periodic time series data (with the columns).

Interactions

On hover a tooltip shows the exact value of a point on the line or a column.

Usage

The first data column is the date, time or other X-axis value. The second column is for the line chart data points. The third column is for column values. Values for the line element are marked on the left-side Y-axis; values for the column elements are marked on the right-side Y-axis.

You can tag points in time for either the line element or the columns element by appending a hash (‘#’) and some text after a cell value. This will render a tag on the chart showing the date that the tag relates to along with any text you have entered after the hash. Tagging a value in the second column will render the tag on the line element; tagging a value in the third column will render the tag on the column element. See the code example below for more details.

If you use a date format, the Line Chart will distribute your data appropriately, so you can miss entries without distorting the timeline. For example, if you have data for Monday to Friday over a number of weeks, the chart will leave a two day gap between Friday and Monday.

Example




	







	
		

			Date
			Share performance
			Revenue
		

	
	
		

			23/03/2015
			9.6
			70
		

		

			24/03/2015
			10
			76#Ads started
		

		

			25/03/2015
			10.1
			80
		

		

			26/03/2015
			9.9
			90
		

		

			27/03/2015
			10.2
			93
		

		

			28/03/2015
			9.8#Bank holiday
			100
		

		

			29/03/2015
			10.1
			106
		

		

			30/03/2015
			
			107
		

		

			31/03/2015
			10.2#New product
			111
		

		

			01/04/2015
			10.2
			111
		

	








Options



The following data attributes are available for a Line Over Column Chart.




 
data-fm-y-label
Adds a label to the left-side Y-axis (line values)

 
data-fm-secondary-y-label
Adds a second label to the right-side Y-axis (column values)

 
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-date-format
Used to interpret time-series data, see the Moment.js docs for format details

 
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-start-pullout


Defines a start date for a pullout section. Must be in the same format as the data-fm-date-format option


data-fm-end-pullout


Defines an end date for a pullout section. Must be in the same format as the data-fm-date-format option


data-fm-pullout-title


Defines a title for your pullout section

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