0

I've created flot chart with jQuery Flot but right now, I have long label on x-axis and it was truncated with ... at the end of string.

I need to add a tooltip on x-axis label to see the full label.

I've attached the screenshot.

enter image description here

Or is there way to customize the rendering axis-label(HTML)?

Thanks

Raidri
  • 17,258
  • 9
  • 62
  • 65
Patrick Blind
  • 399
  • 1
  • 4
  • 15

2 Answers2

0

Similar question already answerd by: Mark in Question

Here's an attempt to use your CSS and make some on the fly adjustments so things will fit:

// push the labels down half their width
// while we are at it find longest label height
var longest = -1;
$('#flot_chart .xAxis .tickLabel').each(function(){
   var self = $(this);
   var width = self.width();
   self.css('top',parseInt(self.css('top')) + width/2 - 5);
    if (width > longest){
        longest = width;
    }
});

// now adjust the chart height so we don't overflow
$("#flot_chart").height($("#flot_chart").height() + longest - $('#flot_chart .xAxis .tickLabel').height() + 5);

JSFiddle

Om Sao
  • 7,064
  • 2
  • 47
  • 61
0

I've fixed this add by passing over the HTML string in ticks options.

JQuery Flot inject the HTML string in float-x#-label container.

Patrick Blind
  • 399
  • 1
  • 4
  • 15