Stacked Area

Stacked Area Chart reusable API module that allows us rendering a multi area and configurable chart.

Requires: module:d3-array,
Example

let stackedArea = stackedArea();

stackedArea
    .width(containerWidth);

d3Selection.select('.css-selector')
    .datum(dataset.data)
    .call(stackedArea);

• Stacked-area
  • exports(_selection, _data) ⏏
    • static
      • .axisTimeCombinations
      • .animationDuration(_x) ⇒ duration | module
      • .areaCurve([_x]) ⇒ String | module
      • .areaOpacity(_x) ⇒ Number | module
      • .colorMap([_x]) ⇒ object | module
      • .colorSchema(_x) ⇒ Array.<String> | module
      • .dateLabel(_x) ⇒ String | module
      • .emptyDataConfig(_x) ⇒ Object | module
      • .grid(_x) ⇒ String | module
      • .hasOutline(_x) ⇒ Boolean | module
      • .height(_x) ⇒ Number | module
      • .isAnimated(_x) ⇒ Boolean | module
      • .keyLabel(_x) ⇒ Number | module
      • .numberFormat(_x) ⇒ string | module
      • .margin(_x) ⇒ Object | module
      • .tooltipThreshold(_x) ⇒ Number | module
      • .topicsOrder(_x) ⇒ Array.<String> | module
      • .isLoading(flag) ⇒ boolean | module
      • .locale(_x) ⇒ String | Module
      • .exportChart(filename, title) ⇒ Promise
      • .on() ⇒ module
      • .valueLabel(_x) ⇒ Number | module
      • .width(_x) ⇒ Number | module
      • .xAxisCustomFormat(_x) ⇒ String | Module
      • .xAxisFormat(_x) ⇒ String | Module
      • .xAxisValueType([_x]) ⇒ string | module
      • .xAxisScale([_x]) ⇒ string | module
      • .xTicks(_x) ⇒ Number | Module
      • .yAxisLabel(_x) ⇒ String | module
      • .yAxisLabelOffset([_x]) ⇒ Number | module
      • .yTicks([_x]) ⇒ Number | module
      • .yAxisBaseline([_x]) ⇒ Number | module
    • inner
      • ~AreaChartData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection and data provided

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	AreaChartData	The data to attach and generate the chart

exports.axisTimeCombinations

Exposes the constants to be used to force the x axis to respect a certain granularity current options: MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR

Kind: static property of exports
Example

area.xAxisCustomFormat(area.axisTimeCombinations.HOUR_DAY)

exports.animationDuration(_x) ⇒ duration | module

Gets or Sets the duration of the area animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Number	1200	Desired animation duration for the graph

exports.areaCurve([_x]) ⇒ String | module

Gets or Sets the area curve of the stacked area.

Kind: static method of exports
Returns: String | module - Current area curve setting or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	String	'monotoneX'	Desired curve for the stacked area, default 'monotoneX'. Other options are: basis, natural, linear, monotoneY, step, stepAfter, stepBefore, cardinal, and catmullRom. Visit https://github.com/d3/d3-shape#curves for more information.

Example

stackedArea.areaCurve('step')

exports.areaOpacity(_x) ⇒ Number | module

Gets or Sets the opacity of the stacked areas in the chart (all of them will have the same opacity)

Kind: static method of exports
Returns: Number | module - Current opacity or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Opacity to get/set

exports.colorMap([_x]) ⇒ object | module

Gets or Sets the colorMap of the chart

Kind: static method of exports
Returns: object | module - Current colorMap or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	object		Color map

Example

stackedArea.colorMap({name: 'colorHex', name2: 'colorString'})

exports.colorSchema(_x) ⇒ Array.<String> | module

Gets or Sets the colorSchema of the chart

Kind: static method of exports
Returns: Array.<String> | module - Current colorSchema or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<String>	Desired colorSchema for the graph

exports.dateLabel(_x) ⇒ String | module

Deprecated

Gets or Sets the dateLabel of the chart

Kind: static method of exports
Returns: String | module - Current dateLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired dateLabel for the graph

exports.emptyDataConfig(_x) ⇒ Object | module

Gets or Sets the emptyDataConfig of the chart

Kind: static method of exports
Returns: Object | module - Current config for when chart data is an empty array
Access: public

Param	Type	Description
_x	Object	emptyDataConfig object to get/set

exports.grid(_x) ⇒ String | module

Gets or Sets the grid mode

Kind: static method of exports
Returns: String | module - Current mode of the grid or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired mode for the grid ('vertical'

exports.hasOutline(_x) ⇒ Boolean | module

Enables or disables the outline at the top of the areas

Kind: static method of exports
Returns: Boolean | module - Current state of the flag
Access: public

Param	Type	Description
_x	Boolean	= true Whether if the areas in the chart have an outline at the top

exports.height(_x) ⇒ Number | module

Gets or Sets the height of the chart

Kind: static method of exports
Returns: Number | module - Current height or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired width for the graph

exports.isAnimated(_x) ⇒ Boolean | module

Gets or Sets the isAnimated property of the chart, making it to animate when render.

Kind: static method of exports
Returns: Boolean | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Description
_x	Boolean	= false Desired animation flag

exports.keyLabel(_x) ⇒ Number | module

Deprecated

Gets or Sets the keyLabel of the chart

Kind: static method of exports
Returns: Number | module - Current keyLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired keyLabel for the graph

exports.numberFormat(_x) ⇒ string | module

Gets or Sets the number format of the stacked area chart

Kind: static method of exports
Returns: string | module - Current numberFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	string	= ',f' Desired numberFormat for the chart. See examples here

exports.margin(_x) ⇒ Object | module

Gets or Sets the margin of the chart

Kind: static method of exports
Returns: Object | module - Current margin or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Object	Margin object to get/set

exports.tooltipThreshold(_x) ⇒ Number | module

Gets or Sets the minimum width of the graph in order to show the tooltip NOTE: This could also depend on the aspect ratio

Kind: static method of exports
Returns: Number | module - Current tooltipThreshold or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Minimum width of the graph

exports.topicsOrder(_x) ⇒ Array.<String> | module

Pass an override for the ordering of the topics

Kind: static method of exports
Returns: Array.<String> | module - Current override order or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<String>	Array of the names of your tooltip items

exports.isLoading(flag) ⇒ boolean | module

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
flag	boolean	Desired value for the loading state

exports.locale(_x) ⇒ String | Module

Pass language tag for the tooltip to localize the date. Feature uses Intl.DateTimeFormat, for compatability and support, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

Kind: static method of exports
Returns: String | Module - Current locale or module to chain calls
Access: public

Param	Type	Description
_x	String	A language tag (BCP 47) like 'en-US' or 'fr-FR'

exports.exportChart(filename, title) ⇒ Promise

Chart exported to png and a download action is fired

Kind: static method of exports
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

Param	Type	Description
filename	String	File title for the resulting picture
title	String	Title to add at the top of the exported picture

exports.on() ⇒ module

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut, customDataEntryClick and customTouchMove

Kind: static method of exports
Returns: module - Stacked Area
Access: public

exports.valueLabel(_x) ⇒ Number | module

Deprecated

Gets or Sets the valueLabel of the chart

Kind: static method of exports
Returns: Number | module - Current valueLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired valueLabel for the graph

exports.width(_x) ⇒ Number | module

Gets or Sets the width of the chart

Kind: static method of exports
Returns: Number | module - Current width or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired width for the graph

exports.xAxisCustomFormat(_x) ⇒ String | Module

Exposes the ability to force the chart to show a certain x format It requires a xAxisFormat of 'custom' in order to work. NOTE: localization not supported

Kind: static method of exports
Returns: String | Module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	String	Desired format for x axis, one of the d3.js date formats here

Example

stackedArea.xAxisCustomFormat(stackedArea.axisTimeCombinations.HOUR_DAY)

exports.xAxisFormat(_x) ⇒ String | Module

Exposes the ability to force the chart to show a certain x axis grouping

Kind: static method of exports
Returns: String | Module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	String	Desired format, a combination of axisTimeCombinations (MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR) Set it to 'custom' to make use of specific formats with xAxisCustomFormat

Example

stackedArea.xAxisCustomFormat(stackedArea.axisTimeCombinations.HOUR_DAY)

exports.xAxisValueType([_x]) ⇒ string | module

Gets or Sets the xAxisValueType. Choose between 'date' and 'number'. When set to number the values of the x-axis must not be dates anymore, but can be arbitrary numbers.

Kind: static method of exports
Returns: string | module - Current value type of the x-axis or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	string	"'date'"	Desired value type of the x-axis

Example

stackedArea.xAxisValueType('number')

exports.xAxisScale([_x]) ⇒ string | module

Gets or Sets the xAxisScale. Choose between 'linear' and 'logarithmic'. The setting will only work if xAxisValueType is set to 'number' as well, otherwise it won't influence the visualization.

Kind: static method of exports
Returns: string | module - Current value type of the x-axis or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	string	"'linear'"	Desired value type of the x-axis

Example

stackedArea.xAxisValueType('number').xAxisScale('logarithmic')

exports.xTicks(_x) ⇒ Number | Module

Exposes the ability to force the chart to show a certain x ticks. It requires a xAxisFormat of 'custom' in order to work. NOTE: This value needs to be a multiple of 2, 5 or 10. They won't always work as expected, as D3 decides at the end how many and where the ticks will appear.

Kind: static method of exports
Returns: Number | Module - Current number or ticks or module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired number of x axis ticks (multiple of 2, 5 or 10)

exports.yAxisLabel(_x) ⇒ String | module

Gets or Sets the y-axis label of the chart

Kind: static method of exports
Returns: String | module - Current yAxisLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired label string

Example

stackedArea.yAxisLabel('Ticket Sales')

exports.yAxisLabelOffset([_x]) ⇒ Number | module

Gets or Sets the offset of the yAxisLabel of the chart. The method accepts both positive and negative values.

Kind: static method of exports
Returns: Number | module - Current yAxisLabelOffset or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	-60	Desired offset for the label

Example

stackedArea.yAxisLabelOffset(-55)

exports.yTicks([_x]) ⇒ Number | module

Gets or Sets the number of ticks of the y axis on the chart

Kind: static method of exports
Returns: Number | module - Current vertical ticks or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	5	Desired vertical ticks

exports.yAxisBaseline([_x]) ⇒ Number | module

Gets or Sets the yAxisBaseline - this is the y-value where the area starts from in y-direction (default is 0). Change this value if you don't want to start your area from y=0.

Kind: static method of exports
Returns: Number | module - Current baseline or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	0	Desired baseline of the y axis

Example

stackedArea.yAxisBaseline(20)

exports~AreaChartData : Array.<Object>

Kind: inner typedef of exports
Properties

Name	Type	Description
date	String	Date of the entry in ISO8601 format (required)
name	String	Name of the entry (required)
value	Number	Value of the entry (required)

Example

[
    {
        date: "2011-01-05T00:00:00Z",
        name: "Direct",
        value: 0
    }
]