topic Re: How to make a transparent background with Deneb visual in Custom Visuals Development Discussion

How to make a transparent background with Deneb visual

babass380036 — Sat, 08 Feb 2025 07:43:03 GMT

I bought this Power BI report from The Big Book of Dashboards - Chapter 12 - Power BI Dashboard

Notice the football pitch picture has a Deneb visual which contains blue round markers on top of it.

But when I open it in my Power BI desktop, the football pitch picture shows a white background :

This is how the json for this Deneb visual looks like :

{ "data": {"name": "dataset"}, "mark": { "type": "point", "stroke": "white", "strokeWidth": 1, "size": 150, "opacity": 0.6 }, "encoding": { "x": { "field": "X", "type": "quantitative", "axis": null, "scale": {"domain": [0, 100]} }, "y": { "field": "Y", "type": "quantitative", "axis": null, "scale": {"domain": [0, 100]} }, "color": { "field": "Team", "scale": { "domain": ["France", "Italy"], "range": ["#00529c", "#30a1dd"] }, "legend": null } } }

How to make the background of this Deneb visual transparent?

Thank you

Re: How to make a transparent background with Deneb visual

BeaBF — Tue, 11 Feb 2025 13:11:57 GMT

@babass380036 Hi!

Try to set background null:

Open Deneb and navigate to the Specification panel.
Locate or add the "background" property at the top level of your JSON.
Set its value to "null", like this:

{
"background": "null",
"data": { ... },
"mark": "point",
"encoding": { ... }
}

BBF

Re: How to make a transparent background with Deneb visual

dm-p — Tue, 11 Feb 2025 23:30:35 GMT

Hi @babass380036,

Deneb's background is set to transparent by default when compiling/rendering, so unless you've set it to something else, it should work as you expect.

From the looks of your screenshot, are you using dark mode in Desktop? If so, there are known issues with the background of custom visuals being set to opaque by Power BI when dark mode is enabled. Reports look correct when published in the Service and also in the light modes. The visuals team knows about the issue, but there hasn't been a fix yet.

Regards,

Daniel

EDIT: it also occurred to me that you may want to check the visual container background (under effects) if publish or light mode doesn't work, just in case you have this set to an opaque value, e.g., through your theme. The container background has a higher order of precedence than Deneb's background (container settings like background are managed by MS, and third-party devs can't control or access them).

Re: How to make a transparent background with Deneb visual

babass380036 — Thu, 13 Feb 2025 00:45:05 GMT

Hi @dm-p !

Thanks for your reply!

The Deneb visuals have a transparent background in the Service :

Yes I used Power BI Desktop in dark mode :

Event with transparency = 100%, the visual is not transparent in PBI Desktop :

My Theme has 100% transparence for visual background :

so what am I missing? 🙂

Re: How to make a transparent background with Deneb visual

babass380036 — Thu, 13 Feb 2025 01:19:51 GMT

Hi @dm-p !

Thanks a lot for your answer!

The deneb visuals are transparent in the Service :

Yes I used dark mode for PBI Desktop.

the background of the visual is also 100% transparent.

When I set it to 0%, I notice the transparent part of the border of the visual is smaller:

My theme has 100% transparence for visual background :

what am I missing? 🙂

Re: How to make a transparent background with Deneb visual

babass380036 — Thu, 13 Feb 2025 00:50:56 GMT

Hi @BeaBF !

Thanks but it did not work sadly :_(

Re: How to make a transparent background with Deneb visual

dm-p — Thu, 13 Feb 2025 01:22:06 GMT

Hi @babass380036 , you keep adding a reply that seems to keep going missing each time I come here to answer, so I'll just add my response inline here and hopefully it'll make sense if/when you get a chance to review.

You're not missing anything. There is a bug with Dark Mode and all custom visuals that MS needs to fix. The current workaround is to use a light mode for Desktop when editing using custom visuals.

We actually found the problem when somebody reported an issue with HTML Content, and I followed up with the visuals team. Here's a comment thread on LinkedIn where we discussed the problem.

Re: How to make a transparent background with Deneb visual

babass380036 — Thu, 13 Feb 2025 01:30:58 GMT

Thank you @dm-p ! switching to Light mode made the Deneb visual background transparent in PBI Desktop!