stacked-area

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~~
    - .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.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('numeric')

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('numeric').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
    }
]

exports(_selection, _data) ⏏

Stacked-area

exports(_selection, _data) ⏏​

exports.axisTimeCombinations​

exports.animationDuration(_x) ⇒ duration | module​

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

exports.areaOpacity(_x) ⇒ Number | module​

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

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

exports.dateLabel(_x) ⇒ String | module​

exports.emptyDataConfig(_x) ⇒ Object | module​

exports.grid(_x) ⇒ String | module​

exports.hasOutline(_x) ⇒ Boolean | module​

exports.height(_x) ⇒ Number | module​

exports.isAnimated(_x) ⇒ Boolean | module​

exports.keyLabel(_x) ⇒ Number | module​

exports.margin(_x) ⇒ Object | module​

exports.tooltipThreshold(_x) ⇒ Number | module​

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

exports.isLoading(flag) ⇒ boolean | module​

exports.locale(_x) ⇒ String | Module​

exports.exportChart(filename, title) ⇒ Promise​

exports.on() ⇒ module​

exports.valueLabel(_x) ⇒ Number | module​

exports.width(_x) ⇒ Number | module​

exports.xAxisCustomFormat(_x) ⇒ String | Module​

exports.xAxisFormat(_x) ⇒ String | Module​

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

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

exports.xTicks(_x) ⇒ Number | Module​

exports.yAxisLabel(_x) ⇒ String | module​

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

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

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

exports~AreaChartData : Array.<Object>​

exports(_selection, _data) ⏏

exports.axisTimeCombinations

exports.animationDuration(_x) ⇒ `duration` | `module`

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

exports.areaOpacity(_x) ⇒ `Number` | `module`

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

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

exports.dateLabel(_x) ⇒ `String` | `module`

exports.emptyDataConfig(_x) ⇒ `Object` | `module`

exports.grid(_x) ⇒ `String` | `module`

exports.hasOutline(_x) ⇒ `Boolean` | `module`

exports.height(_x) ⇒ `Number` | `module`

exports.isAnimated(_x) ⇒ `Boolean` | `module`

exports.keyLabel(_x) ⇒ `Number` | `module`

exports.margin(_x) ⇒ `Object` | `module`

exports.tooltipThreshold(_x) ⇒ `Number` | `module`

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

exports.isLoading(flag) ⇒ `boolean` | `module`

exports.locale(_x) ⇒ `String` | `Module`

exports.exportChart(filename, title) ⇒ `Promise`

exports.on() ⇒ `module`

exports.valueLabel(_x) ⇒ `Number` | `module`

exports.width(_x) ⇒ `Number` | `module`

exports.xAxisCustomFormat(_x) ⇒ `String` | `Module`

exports.xAxisFormat(_x) ⇒ `String` | `Module`

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

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

exports.xTicks(_x) ⇒ `Number` | `Module`

exports.yAxisLabel(_x) ⇒ `String` | `module`

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

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

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

exports~AreaChartData : `Array.<Object>`