How to make a transparent background with Deneb visual

[babass380036]

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

[dm-p]

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).

[babass380036]

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

[dm-p · Accepted solution]

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.

[babass380036]

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? 🙂

[babass380036]

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? 🙂

[BeaBF]

@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

[babass380036]

Hi @BeaBF !

Thanks but it did not work sadly :_(