Home

Introduction

This is a fork of Value Labels, a Flot plugin originally developed by Petr Blahos.

The main purpose here is to be able to show the y-axis value or the x-axis value for horizontal bars inside the canvas, providing a better understanding of the graph.

Usage

Value Labels is quite simple to be used. Just place jquery.flot.valuelabels.js in your JavaScript public directory and load it after Flot.

Options

Option	Values	Description	Default
show	true	Show the labels	false
	false	disable labels
showAsHtml	true	to show labels using DIVs – not supported anymore	false
	false	use HTMLCanvasElement.fillText
showLastValue	true	only shows the last value in the series	false
	false	shows all the values
showMinValue	true	only shows the min value in the series	false
	false	shows all the values
showMaxValue	true	only shows the max value in the series	false
	false	shows all the values
showLastValue, showMinValue and showMaxValue can be used together
hideZero	true	hide zero values	false
	false
hideSame	true	hides consecutive labels of the same value	false
	false
reverseAlignBelowZero	true	reverse align and offset for values below 0	false
	false
showShadow	true	false to not use canvas text shadow effect	false
	false
useBackground	true	use boxed labels with background color	false
	false
backgroundColor	CSS-color	background color of boxed labels	#CCCCCC
useBorder	true	use boxed labels with border	false
	false
borderColor	CSS-color	border color of boxed labels	#999999
decimals	number	round to number of decimals (number >= 0)	false
	false	no rounding
useDecimalComma	true	use a comma as decimal sign	false
	false	use a dot as decimal sign
align (ignored for horizontel bars)	‘start’	label text starts at position of point	‘center’
	‘left’
	‘center’	label is centered
	‘end’	label text ends at position of point
	‘right’
valign (for horizontal bars fixed to middle)	‘above’	place label above the line	‘above’
	‘below’	place label below the line
	‘middle’	place label in the middle
	‘bottom’	place label at bottom of the plot
horizAlign (for horizontal bars only)	‘outside’	label is set right of bar for positive and left of bar for negaive values	‘outside’
	‘insideMax’	label is placed inside at the end of the bar
	‘insideCenter’	label is in the bar centered
	‘insideZero’	label is placed near the zero axis
valignLast valignMin valignMax	same as valign	set valign only for last, min or max label	valign
font	size family	example: “9pt ‘Trebuchet MS’”	9pt sans-serif
fontcolor	CSS-color	example: ‘#ff44DD’ or ‘darkblue’	color of line or bar
xoffset	signed Integer	move label by value px horizontal (positive is right)	0
xoffsetMin xoffsetMax xoffsetLast	signed Integer	move label only for min, max or last value	xoffset
yoffset	signed Integer	move label by value px vertical (positive is down)	0
yoffsetMin yoffsetMax yoffsetLast	signed Integer	move label only for min, max or last value	yoffset
rotate	signed Integer	rotate label by value degree clockwise	0
labelFormatter	function	can be used for formatting the label: rounding, decimal signs, prefix like $ or €, … see example below

Examples

var data_a = { label: "Series A", data: [ [1, 10], [2, 20], [3, 30] ] };
var data_b = { label: "Series B", data: [ [1, 30], [2, 20], [3, 10] ] };
var options = [
  valueLabels: {
   show: true,
   labelFormatter: function(v){
      return '€' + v;
   } 
  }
];
var plot = $.plot($('#placeholder'), [data_a, data_b], options);

more Examples
see here