CODEWITHSUNDEEP
jqueryd3.jsjquery-tooltip
Priya
Priya

Reputation: 49

tool tip for half donut or half pie chart

found this link on stack. can we add tool tip into half pie/half donuts chart: http://tributary.io/inlet/5260888

Upvotes: 0

Views: 804

Answers (1)

Mark
Mark

Reputation: 108537

Here's an example adding a div tooltip to your chart.

// create div add to DOM
var div = d3.select("body").append("div")   
    .style("position", "absolute")
    .style("width", "60px")
    .style("height", "18px")
    .style("background", "lightsteelblue")
    .style("border-radius","4px")
    .style("opacity", 0);

.....

// after you append the "arcs"
// set up some mouse handler to show/hide div
arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } ) 
            .attr("d", arc)

    .on("mousemove", function(d) {
        div.transition()        
            .duration(200)      
            .style("opacity", 0.9);      
        div.html("Seats: " + d.value)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });

See example here.

Upvotes: 1

Related Questions