Leonardo Eloy plugin Value Labels
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="https://rawgithub.com/flot/flot/master/jquery.flot.stack.js"></script>
<script src="https://rawgithub.com/leonardoeloy/flot-valuelabels/master/jquery.flot.valuelabels.js"></script>
<div id="placeholder" style="width:500px;height:300px;"></div>
CSS
.valueLabels {
color:red;
}
div.valueLabelLight {
display: none;
}
div.valueLabel {
position:absolute;
margin-top: 20px;
border:none;
}
JavaScript
var data_a = {
label: "Series A",
data: [
[1, 10],
[2, 20],
[3, 25]
]
};
var data_b = {
label: "Series B",
data: [
[1, 30],
[2, 20],
[3, 10]
],
align: 'center'
};
var options = {
series: {
valueLabels: {
show: true,
showAsHtml: true,
labelFormatter: function (v) {
return v + '%';
}
},
bars: {
align: "center",
show: true
},
stack: true
}
};
var plot = $.plot($('#placeholder'), [data_a, data_b], options);