Skip to main content

Stacked Bar

Stacked Bar Chart reusable API module that allows us rendering a multi stacked bar and configurable chart.

Example

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

// dataset: [{ name, stack, value }]
const stackedBarChart = stackedBar();

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

stackedBar(_selection, _data)​

This function creates the graph using the selection and data provided

Kind: Exported function

ParamTypeDescription
_selectionD3SelectionA d3 selection that represents the container(s) where the chart(s) will be rendered
_dataStackedBarDataThe 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: method of stackedBar
Returns: String | null | module - Current a11yTitle or Chart module to chain calls
Access: public

ParamTypeDescription
_xString | nullDesired 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 stackedBar
Returns: String | null | module - Current a11yDescription or Chart module to chain calls
Access: public

ParamTypeDescription
_xString | nullDesired 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 stackedBar
Returns: Boolean | module - Current a11yDataTable or Chart module to chain calls
Access: public

ParamTypeDescription
_xBooleanWhether 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 stackedBar
Returns: Boolean | module - Current a11yKeyboardNavigation or Chart module to chain calls
Access: public

ParamTypeDescription
_xBooleanWhether the keyboard can move through the data

animationDuration(_x) ⇒ duration | module​

Gets or Sets the duration of the animation

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

ParamTypeDefaultDescription
_xNumber1200Desired animation duration for the graph

betweenBarsPadding(_x) ⇒ Number | module​

Gets or Sets the padding of the stacked bar chart

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

ParamTypeDescription
_xNumber= 0.1 Padding value to get/set

colorMap([_x]) ⇒ object | module​

Gets or Sets the colorMap of the chart

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

ParamTypeDefaultDescription
[_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: method of stackedBar
Returns: Array.<String> | module - Current colorSchema or Chart module to chain calls
Access: public

ParamTypeDescription
_xArray.<String>= colorSchemas.britecharts Desired colorSchema for the graph

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 stackedBar
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

ParamTypeDescription
filenameStringName of the downloaded file, whose extension picks the format
titleStringTitle to add at the top of the exported picture

grid(_x) ⇒ String | module​

Gets or Sets the grid mode

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

ParamTypeDescription
_xStringDesired mode for the grid ('vertical'

hasPercentage(_x) ⇒ Boolean | module​

Gets or Sets the hasPercentage status

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

ParamTypeDescription
_xBooleanShould use percentage as value format

height(_x) ⇒ Number | module​

Gets or Sets the height of the chart

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

ParamTypeDescription
_xNumberDesired width for the graph

hasReversedStacks(_x) ⇒ Boolean | module​

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

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

ParamTypeDescription
_xBoolean= false Desired hasReversedStacks flag

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. By default this is 'false'

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

ParamTypeDescription
_xBoolean= false Desired animation flag

isHorizontal(_x) ⇒ Boolean | module​

Gets or Sets the horizontal direction of the chart

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

ParamTypeDescription
_xBoolean= false Desired horizontal direction for the graph

isNormalized(_x) ⇒ Boolean | module​

Gets or Sets whether every stack fills the whole value axis, a 100% stacked bar chart: each segment shows its share of its stack, and the value axis runs from 0% to 100%. The tooltip still shows the values. Meant for data without negative values.

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

ParamTypeDescription
_xBoolean= false Whether to stack to 100%

Example

stackedBar.isNormalized(true)

isLoading(flag) ⇒ boolean | module​

Gets or Sets the loading state of the chart

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

ParamTypeDescription
flagbooleanDesired value for the loading state

margin(_x) ⇒ Object | module​

Gets or Sets the margin of the chart

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

ParamTypeDescription
_xObjectMargin object to get/set

numberFormat(_x) ⇒ String | module​

Gets or Sets the numberFormat of the chart

Kind: method of stackedBar
Returns: String | module - Current numberFormat or Chart module to chain calls
Access: public

ParamTypeDescription
_xString= ',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: method of stackedBar
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: method of stackedBar
Returns: Number | module - Current ratio or Bar Chart module to chain calls
Access: public

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

ParamTypeDefaultDescription
[_x]Number480Minimum 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: method of stackedBar
Returns: LocaleObject | module - Current locale object or Chart module to chain calls
Access: public

ParamTypeDefaultDescription
[_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: method of stackedBar
Returns: Number | module - Current width or Area Chart module to chain calls
Access: public

ParamTypeDescription
_xNumber= 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: method of stackedBar
Returns: Number | module - Current xTicks or Chart module to chain calls
Access: public

ParamTypeDescription
_xNumber= 5 Desired horizontal ticks

yAxisLabel(_x) ⇒ String | module​

Gets or Sets the y-axis label of the chart

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

ParamTypeDescription
_xStringDesired 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: method of stackedBar
Returns: Number | module - Current yAxisLabelOffset or Chart module to chain calls
Access: public

ParamTypeDescription
_xNumber= -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: method of stackedBar
Returns: Number | module - Current yTicks or Chart module to chain calls
Access: public

ParamTypeDescription
_xNumber= 5 Desired vertical ticks

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 stackedBar
Returns: module | null - Current tooltip or Chart module to chain calls
Throws:

  • Error When the tooltip is already set on another chart

Access: public

ParamTypeDescription
_xmodule | nullThe tooltip to show

Example

stackedBar().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 stackedBar
Returns: module - The chart module, to chain calls
Throws:

  • Error When the target matches no element

Access: public

ParamTypeDescription
targetString | Element | D3SelectionWhere to draw the chart
[data]ObjectThe data to draw

Example

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

exports~StackedBarData : Array.<Object>​

Kind: inner typedef of stackedBar
Properties

NameTypeDescription
nameStringName of the entry
stackStringStack of the entry
valueNumberValue of the entry

Example

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