Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Don't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.

Reply
ekazaltzis
New Member

mouseover not working on g.append('rect')

Hi,

 

I developed a custom visualization started from the BarChart example. I would like to have my own tooltips so i I append a 'rect' with on('mouseover'). This is working great in standalone browser but when i package and deploy to PowerBI the onmouse is not triggered. I suppose there are some setttings to control this?

 

Please let me know if you need more info.

 

Regards,

Emanouil

6 REPLIES 6
v-viig
Community Champion
Community Champion

Did you set rect size and fill? Otherwize, events might go though element.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi, Yes according to me I did. Here is the source code for rendering the labels:

 

        private renderLabel(g, backColor, point, prop,x,y) {
                var div = d3.select("body").append("div")	
                .attr("class", "tooltip")				
                .style("opacity", 0);
        
                // create rectangles for text
                g.append("rect")
                .datum(point)
                .attr("height", 15)
                .attr("width", 25)
                .attr("fill", backColor)
//                .attr('opacity', '.3')
                .attr("transform", function(d){ return "translate("+ (x(<number>d.xAxis)-13) + "," +(y(<number>d[prop])-6)+")"})
                .on("mouseenter", (function(d){
                    div.transition()		
                    .duration(200)		
                    .style("opacity", .9);		
                    div.html("xAxis:"+ d.xAxis + "<br/>"  + "yAxis:" + d[prop])	
                    .style("left", x(d.xAxis) + "px")		
                    .style("top", y(d[prop]) + "px");	
                        
                }))                    
                .on("mouseout", (function(){
                    div.transition()		
                    .duration(500)		
                    .style("opacity", 0);	
                }));                    

                // Add text
                let text= g.append("text")
                .datum(point)
                .attr("x", function(d) { return x(<number>d.xAxis) - 10; })
                .attr("y", function(d) { return y(<number>d[prop]) - 5 })
                .attr("dy", ".70em")
//                .attr("text-anchor", "middle")  
                .style('fill', 'black')
                .text(function(d) { return <number>d[prop]; })
        }

    }    

Code looks good to me. Have you tried to add console.log into event handlers to confirm it is (not) fired?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi  Ignat,

 

Thanks for taking the time to respond!

When i don't use PowerBi but just launch it in the browser without any powerbi plugins it works fine. However when wrapping into powerbi it doesn't work. I did previously have some console logs in the event handler and they showed fine in the browser. However  I don't know how to see the logs in powerBi Studio. So i deployed the custom visulatization to the online powerBi and there i don't see any console logs. So i think somtehing is catching the event because when i move over the graph the pointer changes to a hand. Is there a way to set event stopPropagation?

 

Regards,

Emanouil

Interesting.

 

Can you share whole source code to investigate the issue from our end?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hello,

 

Was this issue ever resolved?

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.

Jan25PBI_Carousel

Power BI Monthly Update - January 2025

Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.

Jan NL Carousel

Fabric Community Update - January 2025

Find out what's new and trending in the Fabric community.