JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div class="big-chart-container">
<div class="chart-placeholder"></div>
</div>
CSS
.big-chart-container {
height: 450px;
width: 100%;
box-sizing: border-box;
}
.chart-placeholder {
width: 100%;
height: 100%;
}
.valueLabels {
font-size:70%;
color:black;
}
div.valueLabelLight {
opacity:0.5;
// background-color: white;
border:none;
padding-left: 2px;
position:absolute;
}
div.valueLabel {
position:absolute;
border:none;
padding-left: 2px;
}
JavaScript
/**
* Value Labels Plugin for flot.
* http://leonardoeloy.github.com/flot-valuelabels
* http://wiki.github.com/leonardoeloy/flot-valuelabels/
*
* Using canvas.fillText instead of divs, which is better for printing - by Leonardo Eloy, March 2010.
* Tested with Flot 0.6 and JQuery 1.3.2.
*
* Original homepage: http://sites.google.com/site/petrsstuff/projects/flotvallab
* Released under the MIT license by Petr Blahos, December 2009.
*/
(function ($) {
var options = {
series: {
valueLabels: {
show: false,
showAsHtml: false, // Set to true if you wanna switch back to DIV usage (you need plot.css for this)
showLastValue: false, // Use this to show the label only for the last value in the series
labelFormatter: function(v) { return v; }, // Format the label value to what you want
align: 'start', // can also be 'center', 'left' or 'right'
plotAxis: 'y', // Set to the axis values you wish to plot
hideZero: false
}
}
};
function init(plot) {
plot.hooks.draw.push( function (plot, ctx) {
$.each(plot.getData(), function(ii, series) {
if (!series.valueLabels.show) return;
var showLastValue = series.valueLabels.showLastValue;
var showAsHtml = series.valueLabels.showAsHtml;
var plotAxis = series.valueLabels.plotAxis;
var labelFormatter = series.valueLabels.labelFormatter;
var fontcolor = series.valueLabels.fontcolor;
var xoffset = series.valueLabels.xoffset;
var yoffset = series.valueLabels.yoffset;
var align = series.valueLabels.align;
var font = series.valueLabels.font;
var hideZero = series.valueLabels.hideZero;
// Workaround, since Flot doesn't set this value anymore
series.seriesIndex = ii;
if (showAsHtml) {
...