Check your eligibility for this 50% exam voucher offer and join us for free live learning sessions to get prepared for Exam DP-700.
Get StartedDon'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.
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
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 = 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
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
Hello,
Was this issue ever resolved?
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.
Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.
User | Count |
---|---|
5 | |
1 | |
1 | |
1 | |
1 |
User | Count |
---|---|
8 | |
3 | |
3 | |
2 | |
2 |