Configuring your Flotr graphs is very easy and flexible. You can pass your configuration to Flotr.draw(). The options you set in the option object, can be overridden by options set for an individual series. On this page I’ll show how to configure a graph.

Flotr Project Page » Flotr Documentation » Configuring Flotr Graphs

Passing options

With the function Flotr.draw(element, series, options) you can draw graphs. I recommend reading the quick start guide, if you not already did. The quick start guide explains the basics of using Flotr.

The third arguments of Flotr.draw() is the options object. When a graph is drawn, the options object is merged with the Flotr default options (which you can find on the bottom of this page). Here’s an example of a graph with three point series: 

var f = Flotr.draw(
	$('container'),
	[d1, d2, d3],
	{points: {show: true}}
);

The resulting graph will have three series. The series will show up as points, because the default appearance is overridden. Without the options object three lines will appear. This is the resulting graph:

Flotr Example Graph

But you can also configure the graph per series. This is a more advanced technique, the syntax for series then will look different: 

var f = Flotr.draw(
	$('container'),
	[
		{data:d1, label: 'd1', color: 'black', points:{show: true}},
		{data: d2, label: 'd2', lines:{fill: true}},
		d3
	],{
		lines: {show: true},
		legend: {position: ’se’}
	}
);

The graph that’s drawn based on the code above also has three series, but only one (the first, d1) is drawn as a point series. The other two will show up as line series. The area beneath the second series will be filled. Note that because we defined labels for only the first two series, only those labels show up in the label. This is the resulting graph:

Flotr Example Graph

All options

Here’s a list of all default options with description for Flotr:


colors: ['#00A8F0', '#C0D800', '#cb4b4b', '#4da74d', '#9440ed'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
legend: {
	show: true,		// => setting to true will show the legend, hide otherwise
	noColumns: 1,		// => number of colums in legend table
	labelFormatter: null,	// => fn: string -> string
	labelBoxBorderColor: ‘#ccc’, // => border color for the little label boxes
	container: null,	// => container (as jQuery object) to put legend in, null means default on top of graph
	position: ‘ne’,		// => position of default legend container within plot
	margin: 5,		// => distance from grid edge to default legend container within plot
	backgroundColor: null,	// => null means auto-detect
	backgroundOpacity: 0.85	// => set to 0 to avoid background, set to 1 for a solid background
},
xaxis: {
	ticks: null,		// => format: either [1, 3] or [[1, 'a'], 3]
	noTicks: 5,		// => number of ticks for automagically generated ticks
	tickFormatter: defaultTickFormatter, // => fn: number -> string
	tickDecimals: null,	// => no. of decimals, null means auto
	min: null,		// => min. value to show, null means set automatically
	max: null,		// => max. value to show, null means set automatically
	autoscaleMargin: 0	// => margin in % to add if auto-setting min/max
},
yaxis: {
	ticks: null,		// => format: either [1, 3] or [[1, 'a'], 3]
	noTicks: 5,		// => number of ticks for automagically generated ticks
	tickFormatter: defaultTickFormatter, // => fn: number -> string
	tickDecimals: null,	// => no. of decimals, null means auto
	min: null,		// => min. value to show, null means set automatically
	max: null,		// => max. value to show, null means set automatically
	autoscaleMargin: 0	// => margin in % to add if auto-setting min/max
},
points: {
	show: false,		// => setting to true will show points, false will hide
	radius: 3,		// => point radius (pixels)
	lineWidth: 2,		// => line width in pixels
	fill: true,		// => true to fill the points with a color, false for (transparent) no fill
	fillColor: ‘#ffffff’	// => fill color
},
lines: {
	show: false,		// => setting to true will show lines, false will hide
	lineWidth: 2, 		// => line width in pixels
	fill: false,		// => true to fill the area from the line to the x axis, false for (transparent) no fill
	fillColor: null		// => fill color
},
bars: {
	show: false,		// => setting to true will show bars, false will hide
	lineWidth: 2,		// => in pixels
	barWidth: 1,		// => in units of the x axis
	fill: true,		// => true to fill the area from the line to the x axis, false for (transparent) no fill
	fillColor: null		// => fill color
},
grid: {
	color: ‘#545454′,	// => primary color used for outline and labels
	backgroundColor: null,	// => null for transparent, else color
	tickColor: ‘#dddddd’,	// => color used for the ticks
	labelMargin: 3		// => margin in pixels
},
selection: {
	mode: null,		// => one of null, ‘x’, ‘y’ or ‘xy’
	color: ‘#B6D9FF’,	// => selection box color
	fps: 10			// => frames-per-second
},
mouse: {
	track: null,		// => true to track the mouse, no tracking otherwise
	position: ’se’,		// => position of the value box (default south-east)
	trackFormatter: defaultTrackFormatter, // => formats the values in the value box
	margin: 3,		// => margin in pixels of the valuebox
	color: ‘#ff3f19′,	// => line color of points that are drawn when mouse comes near a value of a series
	trackDecimals: 1,	// => decimals for the track values
	sensibility: 2,		// => the lower this number, the more precise you have to aim to show a value
	radius: 3		// => radius of the tracck point
},
shadowSize: 4			// => size of the ‘fake’ shadow