stacked-bar

Stacked-bar

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

Requires: module:d3-array,
Example

let stackedBar = stackedBar();

stackedBar
    .width(containerWidth);

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

Stacked-bar
- exports(_selection, _data) ⏏
  - static
    - .animationDuration(_x) ⇒ duration | module
    - .betweenBarsPadding(_x) ⇒ Number | module
    - .colorMap([_x]) ⇒ object | module
    - .colorSchema(_x) ⇒ Array.<String> | module
    - .exportChart(filename, title) ⇒ Promise
    - .grid(_x) ⇒ String | module
    - .hasPercentage(_x) ⇒ Boolean | module
    - .height(_x) ⇒ Number | module
    - .hasReversedStacks(_x) ⇒ Boolean | module
    - .isAnimated(_x) ⇒ Boolean | module
    - .isHorizontal(_x) ⇒ Boolean | module
    - .isLoading(flag) ⇒ boolean | module
    - .margin(_x) ⇒ Object | module
    - ~~.nameLabel(_x) ⇒ Number | module~~
    - .numberFormat(_x) ⇒ String | module
    - .on() ⇒ module
    - .percentageAxisToMaxRatio(_x) ⇒ Number | module
    - ~~.stackLabel(_x) ⇒ String | module~~
    - .tooltipThreshold([_x]) ⇒ Number | module
    - ~~.valueLabel(_x) ⇒ Number | module~~
    - .valueLocale([_x]) ⇒ LocaleObject | module
    - .width(_x) ⇒ Number | module
    - .xTicks(_x) ⇒ Number | module
    - .yAxisLabel(_x) ⇒ String | module
    - .yAxisLabelOffset(_x) ⇒ Number | module
    - .yTicks(_x) ⇒ Number | module
  - inner
    - ~StackedBarData : 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	`StackedBarData`	The data to attach and generate the chart

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

Gets or Sets the duration of the 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.betweenBarsPadding(_x) ⇒ `Number` | `module`

Gets or Sets the padding of the stacked bar chart

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

Param	Type	Description
_x	`Number`	= 0.1 Padding value 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

stackedBar.colorMap({groupName: 'colorHex', groupName2: '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>`	= colorSchemas.britecharts Desired colorSchema for the graph

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.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.hasPercentage(_x) ⇒ `Boolean` | `module`

Gets or Sets the hasPercentage status

Kind: static method of exports
Returns: Boolean | module - Is percentage used or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	Should use percentage as value format

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.hasReversedStacks(_x) ⇒ `Boolean` | `module`

Gets or Sets the hasReversedStacks property of the chart, reversing the order of stacks

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

Param	Type	Description
_x	`Boolean`	= false Desired hasReversedStacks flag

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

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'

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.isHorizontal(_x) ⇒ `Boolean` | `module`

Gets or Sets the horizontal direction of the chart

Kind: static method of exports
Returns: Boolean | module - If it is horizontal or Bar Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	= false Desired horizontal direction for the graph

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.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.nameLabel(_x) ⇒ `Number` | `module`

Deprecated

Gets or Sets the nameLabel of the chart

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

Param	Type	Description
_x	`Number`	Desired dateLabel for the graph

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

Gets or Sets the numberFormat of the 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 graph. See examples here

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, and customClick

Kind: static method of exports
Returns: module - Bar Chart
Access: public

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

Configurable extension of the x axis If your max point was 50% you might want to show x axis to 60%, pass 1.2

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

Param	Type	Description
_x	`Number`	Ratio to max data point to add to the x axis

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

Deprecated

Gets or Sets the stackLabel of the chart

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

Param	Type	Description
_x	`String`	Desired stackLabel for the graph

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	Default	Description
[_x]	`Number`	`480`	Minimum width of the graph

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.valueLocale([_x]) ⇒ `LocaleObject` | `module`

Gets or Sets the locale which our formatting functions use. Check the d3-format docs for the required values.

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

Param	Type	Default	Description
[_x]	`LocaleObject`		_x Desired locale object format.

Example

stackedBarChart
 .valueLocale({thousands: '.', grouping: [3], currency: ["$", ""], decimal: "."})

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`	= 960 Desired width for the graph

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

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

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

Param	Type	Description
_x	`Number`	= 5 Desired horizontal ticks

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

stackedBar.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	Description
_x	`Number`	= -60 Desired offset for the label

Example

stackedBar.yAxisLabelOffset(-55)

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

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

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

Param	Type	Description
_x	`Number`	= 5 Desired vertical ticks

exports~StackedBarData : `Array.<Object>`

Kind: inner typedef of exports
Properties

Name	Type	Description
name	`String`	Name of the entry
stack	`String`	Stack of the entry
value	`Number`	Value of the entry

Example

[
    {
        name: "2011-01",
        stack: "Direct",
        value: 0
    }
]

exports(_selection, _data) ⏏

Stacked-bar

exports(_selection, _data) ⏏​

exports.animationDuration(_x) ⇒ duration | module​

exports.betweenBarsPadding(_x) ⇒ Number | module​

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

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

exports.exportChart(filename, title) ⇒ Promise​

exports.grid(_x) ⇒ String | module​

exports.hasPercentage(_x) ⇒ Boolean | module​

exports.height(_x) ⇒ Number | module​

exports.hasReversedStacks(_x) ⇒ Boolean | module​

exports.isAnimated(_x) ⇒ Boolean | module​

exports.isHorizontal(_x) ⇒ Boolean | module​

exports.isLoading(flag) ⇒ boolean | module​

exports.margin(_x) ⇒ Object | module​

exports.nameLabel(_x) ⇒ Number | module​

exports.numberFormat(_x) ⇒ String | module​

exports.on() ⇒ module​

exports.percentageAxisToMaxRatio(_x) ⇒ Number | module​

exports.stackLabel(_x) ⇒ String | module​

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

exports.valueLabel(_x) ⇒ Number | module​

exports.valueLocale([_x]) ⇒ LocaleObject | module​

exports.width(_x) ⇒ Number | module​

exports.xTicks(_x) ⇒ Number | module​

exports.yAxisLabel(_x) ⇒ String | module​

exports.yAxisLabelOffset(_x) ⇒ Number | module​

exports.yTicks(_x) ⇒ Number | module​

exports~StackedBarData : Array.<Object>​

exports(_selection, _data) ⏏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

exports.on() ⇒ `module`

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

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

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

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

exports.valueLocale([_x]) ⇒ `LocaleObject` | `module`

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

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

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

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

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

exports~StackedBarData : `Array.<Object>`