Stacked Bar

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

Example

let stackedBar = stackedBar();

stackedBar
    .width(containerWidth);

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

Stacked-bar
- exports(_selection, _data) ⏏
  - static
    - .a11yTitle(_x) ⇒ String | null | module
    - .a11yDescription(_x) ⇒ String | null | module
    - .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
    - .numberFormat(_x) ⇒ String | module
    - .on() ⇒ module
    - .percentageAxisToMaxRatio(_x) ⇒ Number | module
    - .tooltipThreshold([_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

a11yTitle(_x) ⇒ `String` | `null` | `module`

Gets or Sets the name screen readers announce for the chart. It is set as the svg's aria-label. Unset, the chart is announced as "Stacked bar chart".

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

Param	Type	Description
_x	`String` \| `null`	Desired accessible title for the chart

a11yDescription(_x) ⇒ `String` | `null` | `module`

Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's <desc>. Unset, the chart has no description.

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

Param	Type	Description
_x	`String` \| `null`	Desired accessible description for the chart

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

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

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'})

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

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

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'

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

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

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

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

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

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

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

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

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

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

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

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: "."})

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

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

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')

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)

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) ⏏
a11yTitle(_x) ⇒ String | null | module
a11yDescription(_x) ⇒ String | null | module
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
numberFormat(_x) ⇒ String | module
on() ⇒ module
percentageAxisToMaxRatio(_x) ⇒ Number | module
tooltipThreshold([_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
exports~StackedBarData : Array.<Object>

exports(_selection, _data) ⏏​

a11yTitle(_x) ⇒ String | null | module​

a11yDescription(_x) ⇒ String | null | module​

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​

numberFormat(_x) ⇒ String | module​

on() ⇒ module​

percentageAxisToMaxRatio(_x) ⇒ Number | module​

tooltipThreshold([_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​

exports~StackedBarData : Array.<Object>​

exports(_selection, _data) ⏏

a11yTitle(_x) ⇒ `String` | `null` | `module`

a11yDescription(_x) ⇒ `String` | `null` | `module`

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`

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

on() ⇒ `module`

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

tooltipThreshold([_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`

exports~StackedBarData : `Array.<Object>`