Bar

Bar Chart reusable API class that renders a simple and configurable bar chart.

Example

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

// dataset: [{ name, value }]
const barChart = bar();

barChart
    .height(500)
    .width(800)
    .render('.css-selector', dataset);

• Bar
  • bar(_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) ⇒ padding | module
      • .chartGradient(_x) ⇒ Array.<String> | module
      • .colorMap([_x]) ⇒ object | module
      • .colorSchema(_x) ⇒ colorSchema | module
      • .enableLabels([_x]) ⇒ Boolean | module
      • .exportChart(filename, title) ⇒ Promise
      • .hasLabels([_x]) ⇒ Boolean | module
      • .hasPercentage(_x) ⇒ boolean | module
      • .hasSingleBarHighlight(_x) ⇒ boolean | module
      • .height(_x) ⇒ height | module
      • .highlightBarFunction(_x) ⇒ highlightBarFunction | module
      • .isAnimated(_x) ⇒ isAnimated | module
      • .isHorizontal(_x) ⇒ isHorizontal | module
      • .labelsMargin([_x]) ⇒ number | module
      • .labelsNumberFormat([_x]) ⇒ string | module
      • .labelsSize([_x]) ⇒ number | module
      • .isLoading(flag) ⇒ boolean | module
      • .margin(_x) ⇒ margin | module
      • .numberFormat(_x) ⇒ string | module
      • .on() ⇒ module
      • .percentageAxisToMaxRatio(_x) ⇒ ratio | module
      • .shouldReverseColorList(_x) ⇒ boolean | module
      • .orderingFunction(_x) ⇒ function | Module
      • .valueLocale([_x]) ⇒ LocaleObject | module
      • .width(_x) ⇒ width | module
      • .xAxisLabel(_x) ⇒ String | module
      • .xAxisLabelOffset(_x) ⇒ Number | module
      • .xTicks(_x) ⇒ Number | module
      • .yAxisLabel(_x) ⇒ String | module
      • .yAxisLabelOffset(_x) ⇒ Number | module
      • .yAxisPaddingBetweenChart(_x) ⇒ Number | module
      • .yTicks(_x) ⇒ Number | module
      • .tooltip(_x) ⇒ module | null
      • .render(target, [data]) ⇒ module
    • inner
      • ~BarChartData : Array.<Object>
      • ~LocaleObject : Object

bar(_selection, _data)

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	BarChartData	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 "Bar chart".

Kind: method of bar
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 bar
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 bar
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 bar
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: method of bar
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) ⇒ padding | module

Gets or Sets the padding of the chart (Default is 0.1)

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

Param	Type	Description
_x	Number | module	Padding value to get/set

chartGradient(_x) ⇒ Array.<String> | module

Gets or Sets the gradient colors of a bar in the chart

Kind: method of bar
Returns: Array.<String> | module - Current color gradient or Line Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<String>	Desired color gradient for the line (array of two hexadecimal numbers)

colorMap([_x]) ⇒ object | module

Gets or Sets the colorMap of the chart

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

Param	Type	Default	Description
[_x]	object		Color map

Example

barChart.colorMap({name: 'colorHex', name2: 'colorString'})

colorSchema(_x) ⇒ colorSchema | module

Gets or Sets the colorSchema of the chart

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

Param	Type	Description
_x	Array.<String>	Desired colorSchema for the graph

enableLabels([_x]) ⇒ Boolean | module

Use hasLabels, which does the same. Goes in version 4.

If true, adds labels at the end of the bars

Kind: method of bar
Returns: Boolean | module - Current value of hasLabels or Chart module to chain calls
Access: public

Param	Type	Default
[_x]	Boolean	false

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 bar
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

hasLabels([_x]) ⇒ Boolean | module

If true, adds labels at the end of the bars

Kind: method of bar
Returns: Boolean | module - Current value of hasLabels or Chart module to chain calls
Access: public

Param	Type	Default
[_x]	Boolean	false

hasPercentage(_x) ⇒ boolean | module

Gets or Sets the hasPercentage status

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

hasSingleBarHighlight(_x) ⇒ boolean | module

Gets or Sets the hasSingleBarHighlight status. If the value is true (default), only the hovered bar is considered to be highlighted and will be darkened by default. If the value is false, all the bars but the hovered bar are considered to be highlighted and will be darkened (by default). To customize the bar highlight or remove it completely, use highlightBarFunction instead.

Kind: method of bar
Returns: boolean | module - Is hasSingleBarHighlight used or Chart module to chain calls
Access: public

Param	Type	Description
_x	boolean	Should highlight the hovered bar

height(_x) ⇒ height | module

Gets or Sets the height of the chart

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

Param	Type	Description
_x	number	Desired width for the graph

highlightBarFunction(_x) ⇒ highlightBarFunction | module

Gets or Sets the highlightBarFunction function. The callback passed to this function returns a bar selection from the bar chart. Use this function if you want to apply a custom behavior to the highlighted bar on hover. When hasSingleBarHighlight is true the highlighted bar will be the one that was hovered by the user. When hasSingleBarHighlight is false the highlighted bars are all the bars but the hovered one. The default highlight effect on a bar is darkening the highlighted bar(s) color.

Kind: method of bar
Returns: highlightBarFunction | module - Is highlightBarFunction used or Chart module to chain calls
Access: public

Param	Type	Description
_x	function	Desired operation operation on a hovered bar passed through callback

Example

barChart.highlightBarFunction(bar => bar.attr('fill', 'blue'))
barChart.highlightBarFunction(null) // will disable the default highlight effect

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: method of bar
Returns: isAnimated | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Description
_x	Boolean	Desired animation flag

isHorizontal(_x) ⇒ isHorizontal | module

Gets or Sets the horizontal direction of the chart

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

Param	Type	Description
_x	number	Desired horizontal direction for the graph

labelsMargin([_x]) ⇒ number | module

Offset between end of bar and start of the percentage bars

Kind: method of bar
Returns: number | module - Current offset or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	7	Margin offset from end of bar

labelsNumberFormat([_x]) ⇒ string | module

Gets or Sets the labels number format

Kind: method of bar
Returns: string | module - Current labelsNumberFormat or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	string	"",f""	desired label number format for the bar chart

labelsSize([_x]) ⇒ number | module

Get or Sets the labels text size

Kind: method of bar
Returns: number | module - Current text size or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	12	label font size

isLoading(flag) ⇒ boolean | module

Gets or Sets the loading state of the chart

Kind: method of bar
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) ⇒ margin | module

Gets or Sets the margin of the chart

Kind: method of bar
Returns: margin | module - Current margin or 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 number format of the bar chart

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

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 bar
Returns: module - Bar Chart
Access: public

percentageAxisToMaxRatio(_x) ⇒ ratio | 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 bar
Returns: ratio | module - Current ratio or Chart module to chain calls
Access: public

Param	Type	Description
_x	number	ratio to max data point to add to the x axis

shouldReverseColorList(_x) ⇒ boolean | module

Gets or Sets whether the color list should be reversed or not

Kind: method of bar
Returns: boolean | module - Is color list being reversed or Chart module to chain calls
Access: public

Param	Type	Description
_x	boolean	Should reverse the color list

orderingFunction(_x) ⇒ function | Module

Changes the order of items given the custom function

Kind: method of bar
Returns: function | Module - A custom ordering function or Chart module to chain calls
Access: public

Param	Type	Description
_x	function	A custom function that sets logic for ordering

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 bar
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

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

width(_x) ⇒ width | module

Gets or Sets the width of the chart

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

Param	Type	Description
_x	number	Desired width for the graph

xAxisLabel(_x) ⇒ String | module

Gets or Sets the text of the xAxisLabel on the chart

Kind: method of bar
Returns: String | module - Label or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired text for the label

xAxisLabelOffset(_x) ⇒ Number | module

Gets or Sets the offset of the xAxisLabel on the chart

Kind: method of bar
Returns: Number | module - label or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired offset for the label

xTicks(_x) ⇒ Number | module

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

Kind: method of bar
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 text of the yAxisLabel on the chart

Kind: method of bar
Returns: String | module - Label or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired text for the label

yAxisLabelOffset(_x) ⇒ Number | module

Gets or Sets the offset of the yAxisLabel on the chart

Kind: method of bar
Returns: Number | module - Label or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired offset for the label

yAxisPaddingBetweenChart(_x) ⇒ Number | module

Space between y axis and chart

Kind: method of bar
Returns: Number | module - Current value of yAxisPaddingBetweenChart or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	= 10 Space between y axis and chart

yTicks(_x) ⇒ Number | module

Gets or Sets the number of vertical ticks on the chart

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

Param	Type	Description
_x	Number	= 6 Desired number of vertical ticks for the graph

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 bar
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

bar().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 bar
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

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

exports~BarChartData : Array.<Object>

Kind: inner typedef of bar
Properties

Name	Type	Description
value	Number	Value of the group (required)
name	String	Name of the group (required)

Example

[
    {
        value: 1,
        name: 'glittering'
    },
    {
        value: 1,
        name: 'luminous'
    }
]

exports~LocaleObject : Object

Kind: inner typedef of bar
Properties

Name	Type	Description
decimal	String	the decimal point(e.g., ".")
thousands	String	the group separator(e.g., ",")
grouping	Array.<Number>	the array of group sizes(e.g., [3]), cycled as needed
currency	Array.<String>	the currency prefix and suffix(e.g., ["$", ""])
numerals	Array.<String>	optional; an array of ten strings to replace the numerals 0 - 9.
percent	String	optional; the percent sign(defaults to "%")
minus	String	optional; the minus sign(defaults to hyphen - minus, "-")
nan	String	optional; the not - a - number value(defaults "NaN") See some standard locale object values here.

Example

{
    "decimal": ",",
    "thousands": ".",
    "grouping": [3],
    "currency": ["", "\u00a0€"]
}