cleroux / flot.barlabels Goto Github PK

Flot Bar Labels plugin adds value labels to bar charts.

License: MIT License

JavaScript 100.00%

flot.barlabels's Introduction

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

flot.barlabels's People

Contributors

Stargazers

Watchers

Forkers

prabuktt hnguye34 sircxes

flot.barlabels's Issues

How to show the label outside but at the bottom of the bar, not on top ?

Hi,

Could you tell me whether it is possible to show the label outside but at the bottom of the bar and not at the top as now ?
I have tried to add this option as following (naming bottom_outside position) but it is not working when y is positive.

else if (pos == positions.bottom_outside) {
                            if (y >= 0) {
                                valign = "top";
                                py =  series.yaxis.p2c(b)  + plot.getPlotOffset().bottom;
                            } else {
                                valign = "bottom";
                                py =  series.yaxis.p2c(b) + series.labels.padding;
                            }

Thank you for your help

Responsive Support

Hi, I'm facing issues while resizing the chart.
The position of the labels remain the same while resizing the chart.This makes the labels to be displayed at incorrect positions.

Any fix available??

Stacked Bar Graph Label Base Offset

Really like what you've done here but I believe you might have a bug with Stacked Bar charts. The labels do show up, but they fail to account for the base offset for each stacked bar. Do you by any chance have a solution for this?

Crash with multiple categories and ordered bars

Hello,

When I am using ordered bars (to have multiple categories side by side), all label are "Nan".
Because the series.data[i][2] can be empty and so "b" variable is undefined.
var b = series.data[i].length > 2 ? series.data[i][2] : 0; (line 59)

Could you add a check to prevent this crash please ?
(Something like for example): var b = series.data[i].length > 2 && series.data[i][2] ? series.data[i][2] : 0; )

Thank you for your help !

image for readme

Rotate label

Hello,

Is it possible to rotate the label 90° ?
I tried to rotate de context, as following, before/after the call to addText but it does not work.
The angle parameter is not used by Flot so it cannot work neither.

barLabels.context.rotate(270 * Math.PI / 180);
barLabels.addText(layer, px, py, text, series.labels.font, angle, width, halign, valign); (Line 146)

Thanks for any idea !

Labels disappear when resizing the screen

Hello Cédric,

When resizing the screen, the labels disappear. (And the same issue replicated when the graph drawn multiples times...)

The cause seems to be that when deleting the labels from Dom (see below), the cache inside of Canvas class still keeping them, becomes invalid then.

$(placeholder).find(".flot-bar-labels > .flot-bar-label").remove();

https://github.com/cleroux/flot.barlabels/blob/dae966dacd6bc256b136bcbdb48d395a7306d502/jquery.flot.barlabels.js#L38

Could you so remove them from the cache when delelting from Dom, please ?
For example, something as following:

var layer = "flot-bar-labels";
if (barLabels == null) {
barLabels = new Canvas("flot-bar-labels", placeholder);
}
else {
barLabels.removeText(layer);
barLabels.render();
}
$(placeholder).find(".flot-bar-labels > .flot-bar-label").remove();

as removeText() will only make the texts inactive, render() method will remove actually from the cache.

I have tested this fix.

Possible alternative not tested: in the current version of Flot, Canvas.clearCache() method could remove everything (without specifing the layer). My Flot version too old and this method not existing, so I could not check whether this method could also fix.

Thank you !