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
Hi. I'm new to custom visual development but have some experience with Power BI development, javascript, object oriented programming, etc. I've downloaded the pbibiz service and VS Code and worked through some of the MS tutorials (Circle Card visual). Our need is this:
I need a Power BI visual that will allow me to plot (x, y) points over an image. The X, Y and Image (url or path) will all be inputs to the visual.
Seems straightforward enough. Eventually I will want to allow the user to lasso select (x, y) points on the visual and have the other points go out of focus (visually and as a data selection) but first things first. Is there is a template or similar tutorial that will serve as a sort of "quick start"? Any other advice or considerations are welcome. Thank you.
Hi @bvy, and glad to hear you're getting started with custom visuals development.
In terms of current resources, if you've got the MS tutorials working then you should be able to look through the docs to find out more about specific features of the SDK and APIs.
I appreciate that guided learning beyond the tutorials are a bit thin on the ground. It's a very niche area of Power BI and as a web development skillset is required, a lot of report developers and BI professionals tend not to overlap in these areas.
Personally, I've been developing a course on custom visuals development that covers a bit more theory to build a working visual, as well as some common next steps, and this should be finished-up and released through RADACAD within the next month or so. There will also be an accompanying code repo.
If you're after something free, I've found that there's a wealth of examples for frameworks such as D3.js out there that can be adapted to fit inside custom visuals so it can be a good start to have a look for some existing examples online. I've written a short article a while back on how to start looking at getting such an example into a custom visual, but it's quite basic and serves as a jumping-off point.
In terms of what you're looking to do, I'd have a look for some scatter plot examples and see if you can adapt the above approach to get the visual working in a basic form first.
With adding a lasso select, you'll need to develop the capability to do this from user interaction (you might be able to start with this, this or this), but you'll also need to ensure that your selected points are wired-up for interactivity with the data model, and the team has a library for making this a bit easier.
I believe that Akvelon's scatter chart has lasso select built-in, so it might be possible to have a look at their source for further inspiration. Note that this is an older version of the SDK, so if you're using the latest version (3.x) then the code will need adapting to work on the newer versions but the 'meat' of the logic will still be good for study.
If you want an image to be data-driven, as you have observed, this will likely need to either be supplied from the data model as a URL or base64 representation. Once you have this in your dataView, it should be straightforward to apply to the background or plot area of your visual, with an appropriate element or using CSS. You might need to consider how to stretch or scale the image so that it is consitent with your axes though, based on the visual container's aspect ratio.
Hopefully some of this may help you get started or provide further paths for inspiration. Good luck!
Daniel
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
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.
| User | Count |
|---|---|
| 5 | |
| 3 | |
| 1 | |
| 1 | |
| 1 |