Advance your Data & AI career with 50 days of live learning, dataviz contests, hands-on challenges, study groups & certifications and more!
Get registeredGet Fabric Certified for FREE during Fabric Data Days. Don't miss your chance! Request now
I have a visualisation which has no great need for a context menu other than to be consistent with other Power BI custom visuals. The visual does not use the d3 library, and I can't find a sample to copy off which also doesn't. I'm wondering how I might be able to incorporate it easily?
The current code I'm using is as follows, and it gets all a bit messy in the 'private handleContextMenu' method:
import ISelectionManager = powerbi.extensibility.ISelectionManager;
export class Visual implements IVisual {
private selectionManager: ISelectionManager;
}
constructor(options: VisualConstructorOptions) {
this.handleContextMenu();
}
private handleContextMenu() {
const mouseEvent: MouseEvent = addEventListener as MouseEvent;
const eventTarget: EventTarget = mouseEvent.target;
this.selectionManager.showContextMenu(Selection, { x: MouseEvent.clientX, y: MouseEvent.clientY });
mouseEvent.preventDefault();
}Managed to resolve this using the d3 library:
import {select} from "d3";
export class Visual implements IVisual {
private selectionManager: ISelectionManager;
constructor(options: VisualConstructorOptions) {
this.selectionManager = options.host.createSelectionManager();
this.handleContextMenu();
}
private handleContextMenu() {
select(this.target).on("contextmenu", (event: MouseEvent) => {
this.selectionManager.showContextMenu({}, {
x: event.clientX,
y: event.clientY,
});
event.preventDefault();
});
}
Advance your Data & AI career with 50 days of live learning, contests, hands-on challenges, study groups & certifications and more!
Check out the October 2025 Power BI update to learn about new features.