cleroux / flot.barlabels

Flot Bar Labels plugin adds value labels to bar charts.

flot.barlabels

Flot plugin that adds value labels to bar charts. The appearance and position of the bar labels are customizable through several options.

Compatibility

This plugin is known to be compatible with Flot 0.8.3.

Installation

Download jquery.flot.barlabels.js and place the following script tag after flot's script tags:

<script type="text/javascript" src="[...]/jquery.flot.barlabels.js"></script>

Options

Options can be set in the series options for the plot or within each series object individually.

series: {
	labels: {
		show: boolean
		font: string or font spec
		labelFormatter: null or (fn: string, series object -> string)
		position: string,
		padding: number,
		angle: number
	}
}

show

Specifies whether or not to show value labels.
Value: true or false
Default: true

font

Specifies the font style to use for the labels. This option works the same as flot's font options, accepting a CSS class name or a font object. See flot documentation for details.
Default: The default canvas font. The default CSS class applied to bar labels is 'flot-bar-label'

labelFormatter

A function that allows custom formatting or manipulation of the value that will be displayed on each bar.
Default: Function simply returns the value.

position

Specifies where the label should be drawn on each bar. These values function consistently whether the bar chart is vertical or horizontal, whether the values are positive or negative, or if the bars do not use zero as their baseline.
If the label does not fit inside the bar when using base, middle, or end positions, the position for that label is moved outside.
Acceptable values are 'base', 'middle', 'end', 'outside'
'base' positions the labels inside the end of the bar which is closest to the baseline.
'middle' positions the label at the center of bar along its length.
'end' positions the label inside the bar at the end which is furthest from the baseline.
'outside' positions the label outside the end of the bar.
Default: middle

padding

Specifies the padding used to position labels when using base, end, or outside positions.
Default: 4 pixels

angle

Specifies the label rotation angle in degrees clockwise. Note this option will not work if your version of Flot does not support the angle option. You may modify jquery.flot.js as described here or download the modified version from this repository's example directory to enable this behavior.
Default: 0 deg

nudgeOversize

Specifies whether or not to nudge oversize value labels to the outside position.
Value: true or false
Default: true