Stacked Area

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

Example

import { stackedArea } from '@britecharts/core';

// dataset: [{ date, name, value }]
const stackedAreaChart = stackedArea();

stackedAreaChart
    .width(containerWidth)
    .render('.css-selector', dataset);

Stacked-area
- stackedArea(_selection, _data)
  - static
    - .axisTimeCombinations
    - .a11yTitle(_x) ⇒ String | null | module
    - .a11yDescription(_x) ⇒ String | null | module
    - .a11yDataTable(_x) ⇒ Boolean | module
    - .a11yKeyboardNavigation(_x) ⇒ Boolean | module
    - .animationDuration(_x) ⇒ duration | module
    - .areaCurve([_x]) ⇒ String | module
    - .areaOpacity(_x) ⇒ Number | module
    - .colorMap([_x]) ⇒ object | module
    - .colorSchema(_x) ⇒ Array.<String> | module
    - .emptyDataConfig(_x) ⇒ Object | module
    - .grid(_x) ⇒ String | module
    - .hasOutline(_x) ⇒ Boolean | module
    - .height(_x) ⇒ Number | module
    - .isAnimated(_x) ⇒ Boolean | module
    - .isNormalized(_x) ⇒ Boolean | 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
    - .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
    - .tooltip(_x) ⇒ module | null
    - .render(target, [data]) ⇒ module
  - inner
    - ~AreaChartData : Array.<Object>

stackedArea(_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

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: property of stackedArea
Example

area.xAxisCustomFormat(area.axisTimeCombinations.HOUR_DAY)

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 area chart".

Kind: method of stackedArea
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: method of stackedArea
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

a11yDataTable(_x) ⇒ `Boolean` | `module`

Gets or Sets whether the chart renders its data as a visually hidden table after its svg, which screen readers can read cell by cell. On by default; set it to false when the app gives the data its own accessible form.

Kind: method of stackedArea
Returns: Boolean | module - Current a11yDataTable or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	Whether to render the data table

a11yKeyboardNavigation(_x) ⇒ `Boolean` | `module`

Gets or Sets whether a keyboard can move through the chart's data points: the chart takes one tab stop, the arrow keys move between points, Home and End go to the first and last, and Escape lets go. The tooltip and highlights follow focus as they follow the pointer. On by default.

Kind: method of stackedArea
Returns: Boolean | module - Current a11yKeyboardNavigation or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	Whether the keyboard can move through the data

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

Gets or Sets the duration of the area animation

Kind: method of stackedArea
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

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

Gets or Sets the area curve of the stacked area.

Kind: method of stackedArea
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')

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: method of stackedArea
Returns: Number | module - Current opacity or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Opacity to get/set

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

Gets or Sets the colorMap of the chart

Kind: method of stackedArea
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'})

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

Gets or Sets the colorSchema of the chart

Kind: method of stackedArea
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

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

Gets or Sets the emptyDataConfig of the chart

Kind: method of stackedArea
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

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

Gets or Sets the grid mode

Kind: method of stackedArea
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'

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

Enables or disables the outline at the top of the areas

Kind: method of stackedArea
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

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

Gets or Sets the height of the chart

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

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

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

Gets or Sets the isAnimated property of the chart, making it to animate when render. The chart draws without animation when the reader's system asks for reduced motion (prefers-reduced-motion), whatever this is set to.

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

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

isNormalized(_x) ⇒ `Boolean` | `module`

Gets or Sets whether the areas fill the whole value axis, a 100% stacked area chart: each area shows its share of each date's total, and the value axis runs from 0% to 100%. The tooltip still shows the values. Meant for data without negative values.

Kind: method of stackedArea
Returns: Boolean | module - If it is normalized or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	= false Whether to stack to 100%

Example

stackedArea.isNormalized(true)

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

Gets or Sets the number format of the stacked area chart

Kind: method of stackedArea
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

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

Gets or Sets the margin of the chart

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

Param	Type	Description
_x	`Object`	Margin object to get/set

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: method of stackedArea
Returns: Number | module - Current tooltipThreshold or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Minimum width of the graph

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

Pass an override for the ordering of the topics

Kind: method of stackedArea
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

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

Gets or Sets the loading state of the chart

Kind: method of stackedArea
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

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: method of stackedArea
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'

exportChart(filename, title) ⇒ `Promise`

Exports the chart and fires a download: an svg file when the filename ends in .svg, and a png otherwise

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

Param	Type	Description
filename	`String`	Name of the downloaded file, whose extension picks the format
title	`String`	Title to add at the top of the exported picture

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: method of stackedArea
Returns: module - Stacked Area
Access: public

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

Gets or Sets the width of the chart

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

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

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: method of stackedArea
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)

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

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

Kind: method of stackedArea
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)

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: method of stackedArea
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')

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: method of stackedArea
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')

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: method of stackedArea
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)

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

Gets or Sets the y-axis label of the chart

Kind: method of stackedArea
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')

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

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

Kind: method of stackedArea
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)

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

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

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

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

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: method of stackedArea
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)

tooltip(_x) ⇒ `module` | `null`

Gets or Sets the tooltip the chart shows: a tooltip(), set on this chart only. The chart connects it to its pointer and keyboard events, draws it in place, and sets the labels its data points need, unless they were set on the tooltip; it does so now if the chart has drawn, and again on every draw. Its event handlers go under the britechartsTooltip namespace. Null, or another tooltip, removes the one it had.

Kind: method of stackedArea
Returns: module | null - Current tooltip or Chart module to chain calls
Throws:

Error When the tooltip is already set on another chart

Access: public

Param	Type	Description
_x	`module` \| `null`	The tooltip to show

Example

stackedArea().tooltip(tooltip().title('Uses')).render('#chart', data);

render(target, [data]) ⇒ `module`

Draws the chart into a target: a CSS selector, an element or a d3 selection, as select(target).datum(data).call(chart) does. A selector draws into the first element it matches. Without data, the chart redraws with the data it last drew there.

Kind: method of stackedArea
Returns: module - The chart module, to chain calls
Throws:

Error When the target matches no element

Access: public

Param	Type	Description
target	`String` \| `Element` \| `D3Selection`	Where to draw the chart
[data]	`Object`	The data to draw

Example

stackedArea().width(600).render('#chart', data);

exports~AreaChartData : `Array.<Object>`

Kind: inner typedef of stackedArea
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
    }
]

stackedArea(_selection, _data)
axisTimeCombinations
a11yTitle(_x) ⇒ String | null | module
a11yDescription(_x) ⇒ String | null | module
a11yDataTable(_x) ⇒ Boolean | module
a11yKeyboardNavigation(_x) ⇒ Boolean | module
animationDuration(_x) ⇒ duration | module
areaCurve([_x]) ⇒ String | module
areaOpacity(_x) ⇒ Number | module
colorMap([_x]) ⇒ object | module
colorSchema(_x) ⇒ Array.<String> | module
emptyDataConfig(_x) ⇒ Object | module
grid(_x) ⇒ String | module
hasOutline(_x) ⇒ Boolean | module
height(_x) ⇒ Number | module
isAnimated(_x) ⇒ Boolean | module
isNormalized(_x) ⇒ Boolean | 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
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
tooltip(_x) ⇒ module | null
render(target, [data]) ⇒ module
exports~AreaChartData : Array.<Object>

stackedArea(_selection, _data)​

axisTimeCombinations​

a11yTitle(_x) ⇒ String | null | module​

a11yDescription(_x) ⇒ String | null | module​

a11yDataTable(_x) ⇒ Boolean | module​

a11yKeyboardNavigation(_x) ⇒ Boolean | module​

animationDuration(_x) ⇒ duration | module​

areaCurve([_x]) ⇒ String | module​

areaOpacity(_x) ⇒ Number | module​

colorMap([_x]) ⇒ object | module​

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

emptyDataConfig(_x) ⇒ Object | module​

grid(_x) ⇒ String | module​

hasOutline(_x) ⇒ Boolean | module​

height(_x) ⇒ Number | module​

isAnimated(_x) ⇒ Boolean | module​

isNormalized(_x) ⇒ Boolean | 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​

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​

tooltip(_x) ⇒ module | null​

render(target, [data]) ⇒ module​

exports~AreaChartData : Array.<Object>​

stackedArea(_selection, _data)

axisTimeCombinations

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

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

a11yDataTable(_x) ⇒ `Boolean` | `module`

a11yKeyboardNavigation(_x) ⇒ `Boolean` | `module`

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

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

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

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

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

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

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

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

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

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

isNormalized(_x) ⇒ `Boolean` | `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`

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`

tooltip(_x) ⇒ `module` | `null`

render(target, [data]) ⇒ `module`

exports~AreaChartData : `Array.<Object>`