Question

I’m trying to produce a line chart using Flot, but I want the data labels to show up on the chart – meaning, I want the value of each point to appear next to that point. I feel like this should be an option, but can’t find it in the API. Am I just missing something, or does someone know a workaround?

Thanks in advance.

Answer 1

Here is how I added the feature, including a pleasant animation effect:

var p = $.plot(...);

$.each(p.getData()[0].data, function(i, el){
  var o = p.pointOffset({x: el[0], y: el[1]});
  $('<div class="data-point-label">' + el[1] + '</div>').css( {
    position: 'absolute',
    left: o.left + 4,
    top: o.top - 43,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

You can move the position and display css to a stylesheet.