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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

New Member

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



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.




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

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 ="body").append("div")	
                .attr("class", "tooltip")				
                .style("opacity", 0);
                // create rectangles for text
                .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){
                    .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(){
                    .style("opacity", 0);	

                // Add text
                let text= g.append("text")
                .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

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?






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


Ignat Vilesov,

Software Engineer


Microsoft Power BI Custom Visuals



Was this issue ever resolved?

Helpful resources

Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.


Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.