Stacked Area Chart

Stacks time-series data so that the cumulative and component values are clearly shown.

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 area for each series, with the series name shown in the key.

If you use a date format, the Stacked Area 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




	







	
		

			DateIce creamUmbrellasHorse shoesPencilsMugsWizard hatsLight bulbsFire extinguishersWheelbarrows
		

	
	
		

			01/01/201415006500420025003200100300200400
		

			01/02/201410456000456725373937103347240200
		

			01/03/201464001500490825053577101328301670
		

			01/04/201414003500560025263403103327340700
		

			01/05/2014100075006007257238101083351040780
		

			01/06/2014109045005670258534251003612708900
		

			01/07/20141010560064322595398910438435001400
		

			01/08/20145500140040322549391410938631001300
		

			01/09/20141100800030022521327010839625031215
		

			01/10/2014340025001023252133901083222190900
		

			01/11/20146000170090025963858105355760403
		

			01/12/201465001000358325083478110323300340
		

	








Options



The following data attributes are available for a Stacked Area 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
Forces the Y-axis to include 0

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

 
data-fm-percent
Renders the visualization as a 100% stacked area chart

 
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 stacked area chart will draw some transient elements outside of its configured height and width (see layout guide)