CODEWITHSUNDEEP
javascriptjquerychartsflot
Patrick Blind
Patrick Blind

Reputation: 399

How to add tooltip to axis label with jQuery Flot

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

Upvotes: 0

Views: 269

Answers (2)

Patrick Blind
Patrick Blind

Reputation: 399

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.

Upvotes: 0

Om Sao
Om Sao

Reputation: 7643

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

Upvotes: 0

Related Questions