Line Chart

Plots time-series data.

Interactions

Users can track the exact values at a given time by hovering over the chart. This will show a tracking line and a tooltip with the details for that point in time.

Usage

The first column is the date, time or any other X-axis value. All subsequent columns represent series data. If you have multiple series then there will be one coloured line for each series, with the series name shown in the key.

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




	







	
		

			MonthIce cream salesUmbrella sales
		

	
	
		

			12 Apr10007500
		

			13 Apr10456000
		

			19 Apr11008000
		

			20 Apr15006500
		

			26 Apr34002500
		

			27 Apr60001700
		

			03 May55001400
		

			04 May65001000
		

			10 May64001500
		

			11 May14003500
		

			17 May10904500
		

			18 May10105600
		

	










Options



The following data attributes are available for a Line 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-date-format
Used to interpret time-series data, see the Moment.js docs for format details

 
data-fm-include-zero
Forces the Y-axis to include 0

 
data-fm-rebase
Tracks the percentage change of each series. This mode is useful for comparing how two series fared relatively, for example Company A’s stock price may have doubled while Company B’s stock price only rose by 20%

 
data-fm-smooth-curve
Connect points with a smooth line

 
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)