Grouped Bar

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

Example

import { select } from 'd3-selection';
import { groupedBar } from '@britecharts/core';

// dataset: [{ name, group, value }]
const groupedBarChart = groupedBar();

groupedBarChart
    .width(containerWidth);

select('.css-selector')
    .datum(dataset)
    .call(groupedBarChart);

• Grouped-bar
  • exports(_selection, _data) ⏏
    • static
      • .a11yTitle(_x) ⇒ String | null | module
      • .a11yDescription(_x) ⇒ String | null | module
      • .a11yDataTable(_x) ⇒ Boolean | module
      • .a11yKeyboardNavigation(_x) ⇒ Boolean | module
      • .animationDuration(_x) ⇒ duration | module
      • .betweenBarsPadding([_x]) ⇒ Number | module
      • .betweenGroupsPadding([_x]) ⇒ Number | module
      • .colorMap([_x]) ⇒ object | module
      • .colorSchema(_x) ⇒ colorSchema | module
      • .exportChart(filename, title) ⇒ Promise
      • .grid([_x]) ⇒ String | module
      • .height([_x]) ⇒ height | module
      • .isHorizontal([_x]) ⇒ isHorizontal | module
      • .isAnimated([_x]) ⇒ isAnimated | module
      • .isLoading(flag) ⇒ boolean | module
      • .margin(_x) ⇒ margin | module
      • .numberFormat(_x) ⇒ Array.<string> | module
      • .on() ⇒ 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
      • .yTickTextOffset([_x]) ⇒ Object | module
    • inner
      • ~GroupedBarChartData : 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	GroupedBarChartData	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 "Grouped 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

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: static method of exports
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: static method of exports
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 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 between bars.

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

Param	Type	Default	Description
[_x]	Number	0.1	Padding value to get/set

betweenGroupsPadding([_x]) ⇒ Number | module

Gets or Sets the padding between groups of bars.

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

Param	Type	Default	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

groupedBar.colorMap({groupName: 'colorHex', groupName2: 'colorString'})

colorSchema(_x) ⇒ colorSchema | module

Gets or Sets the colorSchema of the chart

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

Param	Type	Description
_x	Array.<String>	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: 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	Name of the downloaded file, whose extension picks the format
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	Default	Description
[_x]	String		Desired mode for the grid ('vertical'

height([_x]) ⇒ height | module

Gets or Sets the height of the chart

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

Param	Type	Default	Description
[_x]	Number	500	Desired width for the graph

isHorizontal([_x]) ⇒ isHorizontal | module

Gets or Sets the horizontal direction of the chart

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

Param	Type	Default	Description
[_x]	number	false	Desired horizontal direction for the graph

isAnimated([_x]) ⇒ isAnimated | 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: static method of exports
Returns: isAnimated | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Default	Description
[_x]	Boolean	false	Desired animation flag

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 * @public

Param	Type	Description
flag	boolean	Desired value for the loading state

margin(_x) ⇒ margin | module

Gets or Sets the margin of the chart

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

Param	Type	Description
_x	Object	Margin object to get/set

numberFormat(_x) ⇒ Array.<string> | module

Gets or Sets the numberFormat of the chart

Kind: static method of exports
Returns: Array.<string> | module - Current numberFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<string>	= ',f' Desired numberFormat for the chart. 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

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 chart to show the tooltip

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

groupedBarChart
 .locale({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	Default	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	Default	Description
[_x]	Number	5	Desired xTicks

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

groupedBar.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	Default	Description
[_x]	Number	-60	Desired offset for the label

Example

groupedBar.yAxisLabelOffset(-55)

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 yTicks or Chart module to chain calls
Access: public

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

yTickTextOffset([_x]) ⇒ Object | module

Gets or Sets the x and y offset of ticks of the y axis on the chart

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

Param	Type	Default	Description
[_x]	Object	{ y: -8, x: -20 }	Desired offset

exports~GroupedBarChartData : Array.<Object>

Kind: inner typedef of exports
Properties

Name	Type	Description
name	String	Name of the entry
group	String	group of the entry
value	Number	Value of the entry

Example

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