Flotr: Basic Legend Example

Example

This example shows how to configure the legend. Note I also added a style tag (between the header tags) to add a 2px border to the legend container. I could also style other legend elements. The elements get the the following css classes when they're generated:

• flotr-legend → Legend wrapper element.
• flotr-legend-bg → Legend background element.
• flotr-legend-color-box → Legend color box.
• flotr-legend-label → Legend label.

Finished? Go to the example index page or the Flotr Documentation Pages.

The Code

/**
 * This function prepend each label with 'y = '.
 */
function myLabelFunc(label){
	return 'y = ' + label;
}

var f = Flotr.draw(
	$('container'), [ 
		{data:d1, label:'x + sin(x + π)'},
		{data:d2, label:'x'},
		{data:d3, label:'15 - cos(x)'}											
	],{
		legend:{
			position: 'se', // => position the legend 'south-east'.
			labelFormatter: myLabelFunc, // => format the labels.
			backgroundColor: '#D2E8FF' // => a light blue background color.
		}
	}
);