README.md

<BarChart />

===================== import { BarChart } from 'ihme-ui'

<BarChart /> is a composition that can be used for producing normal, grouped, and stacked bar charts, including x- and y-axes, title, and an optional legend.

Property	Required	Type(s)	Default	Description
autoFormatAxes		bool	true	auto-calculate chart padding needed for tick/axes labels and whether tick labels need rotation (will only be applied to axes whose scale type is categorical in nature (i.e., 'point', 'ordinal', 'band')).
axisLabels		{ domain: string, range: string }		label text for axes
axisStyle		CommonPropTypes.style		inline styles applied to axis component
align		number		Alignment of each bar within its band. If there is any padding between bars, this property specifies how that space will be allocated. The value must be in the range [0, 1], where: - 0 represents left alignment - 0.5 represents center alignment - 1 represents right alignment See: https://github.com/d3/d3-scale/blob/master/README.md#band_align
bandPadding		number		A convenience for setting the bandInnerPadding and bandOuterPadding to the same value. See: https://github.com/d3/d3-scale/blob/master/README.md#band_padding
bandInnerGroupPadding		number		Padding between the bars of each group, specified as a proportion of the band width (i.e. the space allocated for each group).
bandInnerPadding		number		Padding between bars, specified as a proportion of the band width (i.e. the space allocated for each bar). The value must be in the range [0, 1], where: - 0 represents no padding between bars - 0.5 represents padding of the same width as the bars - 1 represents all padding, giving bars a width of 0 (probably not very useful) See: https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner
bandOuterPadding		number		Padding before the first bar and after the last bar, specified as a proportion (or multiple) of the band width (i.e. the space allocated for each bar). See: https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter
categories	true	string[] or number[]		List of category names used in the bar chart. Categories are arrayed across the domain. For a normal bar chart, each category is represented by a single bar. For stacked bars, each category is represented by a single stack. For grouped bars, each category is represented by a single group.
subcategories	true	string[] or number[]		List of subcategory names used in the bar chart. In a stacked bar chart, each stack contains a layer for each subcategory. In a grouped bar chart, each group contains a bar for each subcategory.
chartClassName		CommonPropTypes.className		className applied to the chart element
chartStyle		CommonPropTypes.style		inline styles applied to the chart element
chartHeight		number	400	height of the chart in pixels
chartWidth		number	600	width of the chart in pixels
className		CommonPropTypes.className		className applied to outermost container element
data	true	array of objects		Array of datum objects. A datum object can be just about anything. The only restriction is that it must be possible to obtain the category and value (and, for grouped or stacked bar charts, the subcategory) of each datum using the dataAccessors.
dataAccessors	true	{ category: CommonPropTypes.dataAccessor, subcategory: CommonPropTypes.dataAccessor, value: CommonPropTypes.dataAccessor }		Accessors on datum objects: - category: used to determine the bar's category (to plot it on the chart domain). In a stacked bar chart, it represents the stack. In a grouped bar chart, it represents the group. - subcategory: for a grouped or stacked bar chart, used to determine the bar's subcategory (layer in a stack or member of group) - value: used to obtain the bar's data value (to plot it on the chart range) Each accessor can either be a string or function. If a string, it is assumed to be the name of a property on datum objects; full paths to nested properties are supported (e.g. { x: 'values.year', ... }). If a function, it is passed the datum as its first and only argument.
displayLegend		bool	false	display a legend?
fill		string or function		either a string representing the fill color (in which case the same color is used for all bars) or a function taking the datum and returning a string representing the fill color
focus		object		the datum object corresponding to the <Bar/> currently focused
focusedClassName		CommonPropTypes.className		className applied if <Bar/> has focus
focusedStyle		CommonPropTypes.style		inline styles applied to focused <Bar/>. If an object, spread into inline styles. If a function, passed underlying datum corresponding to its <Bar/>, and return value is spread into inline styles. signature: (datum) => obj
legendAccessors	if displayLegend	{ labelKey: CommonPropTypes.dataAccessor, shapeColorKey: CommonPropTypes.dataAccessor, shapeTypeKey: CommonPropTypes.dataAccessor }		Accessors to legendItems objects: - labelKey: used to get the legend item label - shapeColorKey: used to get the shape color - shapeTypeKey: used to get the shape type Required if displayLegend is true.
legendItems	if displayLegend	object[]		Array of objects used to build items in the legend. These objects can be just about anything. The only restriction is that it must be possible to obtain the label, shape color, and shape type for the legend item using the legendAccessors. Required if displayLegend is true.
legendClassName		CommonPropTypes.className		className applied to element wrapping the legend
legendStyle		CommonPropTypes.style		inline styles applied to element wrapping the legend
legendListClassName		CommonPropTypes.className		className applied to <ul>, which wraps legend items
legendListStyle		CommonPropTypes.style		inline styles applied to <ul>, which wraps legend items; if a function, passed items as argument
legendItemClassName		CommonPropTypes.className		classname applied to legend item elements
legendItemStyle		CommonPropTypes.style		inline styles applied to legend item elements; if passed an object, will be applied directly inline to the <li>; if passed a function, will be called with the current item obj
minTickLabelSpacing		number	4	Minimum spacing (in px) between horizontal axis tick labels. Used to determine the width at which tick labels should rotate.
onClick		func	selects (or deselects) clicked bars	onClick callback applied to each <Bar/>. signature: (SyntheticEvent, datum, instance) => {...}
onMouseLeave		func		onMouseLeave callback applied to each <Bar/>. signature: (SyntheticEvent, datum, instance) => {...}
onMouseMove		func		onMouseMove callback applied to each <Bar/>. signature: (SyntheticEvent, datum, instance) => {...}
onMouseOver		func		onMouseOver callback applied to each <Bar/>. signature: (SyntheticEvent, datum, instance) => {...}
orientation		'vertical' or 'horizontal'	'vertical'	orientation of bar chart, representing the direction in which bars extend from the domain axis
padding		{ top: number, bottom: number, left: number, right: number }		padding around the chart contents
rectClassName		CommonPropTypes.className		className applied to each <Bar/>
rectStyle		CommonPropTypes.style		inline styles passed to each <Bar/>
selectedClassName		CommonPropTypes.className		className applied to <Bar/>s if selected
selectedStyle		CommonPropTypes.style		inline styles applied to selected <Bar/>s. If an object, spread into inline styles. If a function, passed underlying datum corresponding to its <Bar/>, and return value is spread into inline styles. signature: (datum) => obj
selection		object or array		datum object or array of datum objects corresponding to selected <Bar/>s
style		CommonPropTypes.style		inline styles applied to outermost container element
title		string		title text for the chart
titleClassName		CommonPropTypes.className		className applied to element wrapping the title
titleStyle		CommonPropTypes.style		inline styles applied to element wrapping the title
type		'normal', 'stacked', or 'grouped'	'normal'	bar chart type