How do I set the color of the tooltip text in a fleet chart?
I am using a float chart with multiple series data. I want to change the color of the tooltip text in a fleet chart. I am using this code:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series;
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label;
var allSeries = plot.getData();
$.each(allSeries, function(i,s){
if (s == hoverSeries) return;
$.each(s.data, function(j,p){
if (p[0] == x){
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
any color choices in the prompt?
source to share
Fleet Chart supports HTML tags in ToolTip
You can use html tag easily: <span>
Flot chart ToolTip Supports HTML tags easily.
With a tag, <span>
you can style s.clor
with style. Like this js.
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series;
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = "<span style=\"color:" + item.series.color + ";\""+x + " / " + y + " for " + item.series.label + "</span>";
var allSeries = plot.getData();
$.each(allSeries, function(i,s){
if (s == hoverSeries) return;
$.each(s.data, function(j,p){
if (p[0] == x){
strTip += "</br><span style=\"color:" + s.color + ";\"" + p[0] + " / " + p[1] + " for " + s.label + "</span>";
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
Here obviously I used item.series.color
and s.color
in the strTip
ToolTip line
source to share
Please use this line instead of strTip.
strTip += "</br><span style=\"color:"+s.color+";\">" + p[0] + " / " + p[1] + " for " + s.label+"</span>";
Using this string, you will get the same tooltip text color as your data series color. here, I used this for 4 rows of data in a single float map. [Four Button Tip] [1]
source to share