CODEWITHSUNDEEP
javascriptd3.js
newb
newb

Reputation: 51

Change tooltips color d3.js

I am trying to add tooltips on a donut chart using src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" I want the font color of tooltips change when user switches to different pieces of the donut.

For example, when user hovers over the orange part, the font color is orange.When user hovers over the blue part, the font color of tooltip change to blue accordingly. I was trying to do this by adding if-else statements after d3.tip(), but it doesn't work. I also create a plunker here.

I know there are many ways to add tooltips, but in this example I want to stick to use this "http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"

Appreciate if anyone can help with this! 
 var tip = d3.
    tip().
    attr('class', 'd3-tip').
    offset([100, 0]).
    html(function(d) {
      if (d.fruit == 'Apple') {
        return "<strong style = 'color:red'>Count: </strong> <span style='color:red'>" + d.count + '</span>';
      } else if (d.fruit == 'Banana') {
        return "<strong style = 'color:blue'>Count: </strong> <span style='color:blue'>" + d.count + '</span>';
      } else {
        return "<strong style = 'color:orange'>Count: </strong> <span style='color:orange'>" + d.count + '</span>';
      }
    });

Upvotes: 3

Views: 1211

Answers (1)

AtheistP3ace
AtheistP3ace

Reputation: 9691

You want to access the data property on the d parameter to get the fruit and count. Like this:

if (d.data.fruit == 'Apple') {
    return "<strong style = 'color:blue'>Count: </strong> <span style='color:blue'>" + d.data.count + '</span>';
} else if (d.data.fruit == 'Banana') {
    return "<strong style = 'color:red'>Count: </strong> <span style='color:red'>" + d.data.count + '</span>';
} else {
    return "<strong style = 'color:orange'>Count: </strong> <span style='color:orange'>" + d.data.count + '</span>';
}

Also looks like you had your Apple and Banana colors backwards so I fixed that above too.

Upvotes: 2

Related Questions