0

I have am using piechart by nvd3. Lately I upgraded nvd3 to 1.8.1 and I need to overwrite tooltip. This is my code from older version: 

piechartCurrent.tooltip.contentGenerator(function (obj) {
        content = '<h3 style="background-color: ';
        content += obj.color + '">';
        content += obj.data.key + '</h3><p>$' +  Math.round(obj.data.y * 100) / 100 + ' ('+ obj.data.symbols +')</p>';
        return content;
    });

Which looks like this:
enter image description here
But I would like to use new style for tooltip:
enter image description here
What is html code for new tooltip? I need to overwrite tooltip, since I need some custom text there.

Edit:
Jsfiddle example

Edit 2: Jsfiddle with symbols.

Community
  • 1
  • 1
Lucas03
  • 2,267
  • 2
  • 32
  • 60

2 Answers2

0

If you are using NVD3 v1.8.1 the tooltip header will hidden by default. But try this :

piechartCurrent.tooltip.headerEnabled(false);

Here is a link to its source

UPDATED ANSWER

You need to remove the chart.tooltip.contentGenerator() function to use the default styles, you have been overriding the default all this time.

There are two parts in the tooltip, if you want to override. The Key and the Value. The Key is where the chart element is displayed, eg: "Finance"

chart.tooltip.keyFormatter(function (d, i) {
    var symbol = '';

    pieSectorData().forEach(function (entry) {
       // Search data for key and return the symbols
       if (entry.key == d){
           symbol = entry.symbols
       }
    });
    return  d + '(' + symbol + ')'
});

And to format your value in the tooltip with the $ symbol use the following :

chart.tooltip.valueFormatter(function (d, i) {
    return '$' + d
});

Hope it helps.

shabeer90
  • 5,161
  • 4
  • 47
  • 65
  • If header is disabled, then I only need code to that square filled with color. How do I do that square color box? – Lucas03 Oct 10 '15 at 17:25
  • Could you put your code in JSFiddle please, so we can have a look. – shabeer90 Oct 10 '15 at 20:50
  • Right. Sorry, I did not include it in my first jsfiddle, but I need to add more info as well. List of symbols. Here is edited jsfiddle with symbols http://jsfiddle.net/25b3rvL8/2/ I checked d nad i in params, but d is only value and i is 0. – Lucas03 Oct 11 '15 at 17:51
  • @Lucas03 I have updated the answer with the `keyFormatter` function. – shabeer90 Oct 11 '15 at 22:33
  • 1
    Ok, thanks! Probably `key = entry.symbols` should be `symbol = entry.symbols`. – Lucas03 Oct 12 '15 at 08:32
  • Apologies on that, it was too late in the night :) – shabeer90 Oct 12 '15 at 09:07
0

For some reason shabeer90's answer did not work for me after all. I was working/changing symbols in js file and that did not take any effect. So I used my original code tooltip.contentGenerator. I simple hardcoded color in there with div:
style.css: 

.square-box {
float: left;
width: 10px;
height: 10px;
margin: 4px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}

and js to edit chart's toltip: 

chart.tooltip.contentGenerator(function (obj) {
        content = '<p><div class="square-box" style="background-color:'+obj.color+';"></div> '+
                obj.data.key +' ('+ obj.data.symbols +') <strong>$' +  Math.round(obj.data.y * 100) / 100 + '</strong> </p>';
        return content;
    });
Lucas03
  • 2,267
  • 2
  • 32
  • 60
  • Here is a [working version](http://jsfiddle.net/shabeer90/30rm9qk7/) of your code, with my answer in it. And it uses the `keyFormatter` function to display the tooltip as you require. A bit surprised it did not work for you. Or have I missed out on something? – shabeer90 Oct 13 '15 at 22:15
  • Yours code worked, but like I said, I was altering symbols in pieSectorData() with javascript and your code somehow broke it. (I just added this here as an alternative, but your answer is better I think) – Lucas03 Oct 14 '15 at 00:27