CODEWITHSUNDEEP
javascriptjqueryd3.jschartstooltip
Free-Minded
Free-Minded

Reputation: 5420

Issue with adding tooltip in D3 pie chart

I am using D3.js to build Pie chart. I am following this tutorial to build Pie chart in D3. Now I want to add tooltip in each of segment of pie chart.

I am trying to use callback to perform some event. Like this ..

<script>
  var pie = new d3pie("pieChart", {
"header": {
    "title": {
        "text": " ",
        "fontSize": 24,
        "font": "open sans"
    },
    "subtitle": {
        "text": " ",
        "color": "#999999",
        "fontSize": 12,
        "font": "open sans"
    },
    "titleSubtitlePadding": 9
},
"footer": {
    "color": "#999999",
    "fontSize": 10,
    "font": "open sans",
    "location": "bottom-left"
},
"size": {
    "canvasWidth": 590
},
"data": {
    "sortOrder": "value-desc",
    "content": [
        {
            "label": "Google",
            "value": 264131,
            "color": "#D78902"
        },
        {
            "label": "Twitter",
            "value": 118812,
            "color": "#04C3FD"
        },
        {
            "label": "Facebook",
            "value": 157618,
            "color": "#0457FD"
        },
        {
            "label": "Yahoo",
            "value": 114384,
            "color": "#FD0404"
        }
    ]
},
"labels": {
    "outer": {
        "pieDistance": 32
    },
    "inner": {
        "hideWhenLessThanPercentage": 3
    },
    "mainLabel": {
        "fontSize": 11
    },
    "percentage": {
        "color": "#ffffff",
        "decimalPlaces": 0
    },
    "value": {
        "color": "#adadad",
        "fontSize": 11
    },
    "lines": {
        "enabled": true
    }
},
"effects": {
    "pullOutSegmentOnClick": {
        "effect": "linear",
        "speed": 400,
        "size": 8
    }
},
"misc": {
    "gradient": {
        "enabled": true,
        "percentage": 100
    }
},
callbacks: {
    onMouseoverSegment: function(info) {
        alert("hi");
    }
}
});
</script>

Here if you can see I have added onMouseoverSegment event in callbacks which will trigger alert on mouseover.

Now The real thing. I want to show tooltip here with respective value on mouseover and remove that tooltip on mouseout. How can I do this ? please help.

Check JSFIDDLE

Upvotes: 1

Views: 2628

Answers (2)

FearlessHyena
FearlessHyena

Reputation: 4065

The D3Pie library already has tooltips in-built. And they're pretty customizable too. All you need to do is enable them and they should appear just fine

Here's how it looks (from the d3pie website)

enter image description here

and here's the code you should add to enable it

"tooltips": {
            "enabled": true,
            "type": "placeholder",
            "string": "{label}: {value} ({percentage}%)",
            "styles": {
                "backgroundColor": "#040404",
                "borderRadius": 5
            }
        }

See the api here for more customizations you can do

Upvotes: 1

IkeLutra
IkeLutra

Reputation: 21

I haven't used the d3pie library you used as d3 already has a pie layout which works well. Here is a JSfiddle with a working version with your data. I couldn't at a glance see how to extend that library. It might be possible to use this example in the library at tooltips.

  g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return d.data.color; })
  .append('title')
  .text(function(d){return d.data.value})

This code adds the title text to each svg path object which are the segments. If you want more fancy non-browser default tooltips look at this book on d3 which has a section on tooltips.

Fancy tooltips use event listeners using the selection.on() method with the 'mouseover' and 'mouseout' events. This can also be used for highlighting and other ways and are described in the above book. Which is well worth a read and explains a lot about how d3.js works.

Upvotes: 1

Related Questions