minicharts Barchart

Represent data with a barchart

Barcharts are polyvalent charts that should be used most of the time. In a barchart individual value are visually easy to compare because the human eye is good at comparing lengths. Moreover barcharts can represent negative values while polar charts can only represent positive values;

Constructor

new Barchart(el, data, options)

Name	Type	Description
`el`	string	CSS selector representing the element that will hold the chart.
`data`	Array.<number>	Data the chart has to represent.
`options`	BarchartOptions	Options controling graphical aspects of the chart.

Options

Name	Type	Default	Description
`minValue`	number \| "auto"	"auto"	Minimum value data could take. It is important to set this option explicitely if one wants to compare charts and use the same scale on each one. By default `minValue` equals to 0 if all data values are positive or the minimum value if some values are negative.
`maxValue`	number \| "auto"	"auto"	Maximum value data could take.It is important to set this option explicitely if one wants to compare charts and use the same scale on each one. By default it equals to 0 if all values are negative or to maximmum value if some value is positive.
`width`	number	60	Width of the chart.
`height`	number	60	Height of the chart.
`transitionTime`	number	750	Duration of the transitions, in milliseconds.
`colors`	Array.<string> \| function	d3.schemeCategory10	Either an array of colors or a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value.If it is an array with length less than the length of data, then the colors are recycled.
`labels`	Array.<string> \| "none" \| "auto" \| function	"none"	Labels to display in bars. It can be an array with same length as the data. It can also be a function `(d, i) -> labelText` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "none" to hide labels or "auto" to display in a compact way values.
`labelColors`	string \| Array.<string> \| "auto" \| function	"auto"	Color of the labels. It can be a single value or an array with same length as the data. It can also be a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "auto". In this case, the most readable color is choosen depding on the color of the bar.
`labelMinSize`	number	8	Label minimum size in pixels. If there is not enough space for a given label, then it is hidden.
`labelMaxSize`	number	24	Label maximum size in pixels.
`labelPadding`	number	2	Padding to apply to apply to labels.
`labelClass`	string	""	Labels CSS class.
`shapeClass`	string	""	bars CSS class.
`zeroLineStyle`	string	"stroke:#333;stroke-width:1;"	CSS style of the line representing the zero value.

Methods

setData(data)

Update the data represented by the chart

Name	Type	Description
`data`	Array.<number>	Data the chart has to represent.

setOptions(options)

Update the graphical options of a chart

Name	Type	Description
`options`	BarchartOptions	Options controling graphical aspects of the chart.

update(data, options)

Update simulatenously data and options of a barchart.

Name	Type	Description
`data`	Array.<number>	Data the chart has to represent.
`options`	BarchartOptions	Options controling graphical aspects of the chart.

Barchart