Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Husain
Advocate I
Advocate I

Get the visual's background color

Hi,

 

Is there a way to detemine/detect the Visual's background color in the Visual Studio. I want to automatically change font color (to a contrasting color) based on Visual's background color

I found this in the "VisualConstructorOptions"but it doesn't work

options.element.style.backgroundColor

@dm-p 
2 REPLIES 2
dm-p
Super User
Super User

Hi @Husain,

The following objects (and their properties) are standard to the developer visual and are all applied to the visual itself rather than the iframe your visual runs in:

  • General
  • Title
  • Background
  • Lock aspect
  • Border
  • Shadow
  • Tooltip (if you've enabled)

These properties aren't available programmatically either 😞

Regarding background, it's passed down through inheritance but is explicitly set on an element much higher up in the DOM. Here's a screenshot with the element where the background colour is being set (highlighted in blue at the top:

dm-p_0-1596913335870.png

 

The highest point your code can "look upwards" through the DOM is to the iframe element, so I've annotated with a black line. The element you're trying to access in your code (options.element) is highlighted in red. As the style is inherited and not set within the boundaries of the custom visual sandbox, you can't obtain its value.

I've had a look to see if this might be possible using window.getComputedStyle() on the element, but this doesn't return anything of value, unfortunately.

You could add a feature request to make the visual's background colour value available in the visual constuctor with the team, and this might be a useful addition to the SDK.

Alternatively, you could explore options such as using mix-blend-mode: difference in your CSS, but this will only work on black backgrounds (so "dark" backgrounds are not really affected), and the effect isn't as stark as you might want either.

If you want a solution in the current ecosystem, you might have better luck on a specific web development forum as there might be further options with CSS that I'm not mature enough to know about.

Thanks for the question - it's provided me with an interesting problem to take a go at solving, but I just don't think it's possible without the values being present through the SDK.

Good luck in your search,

Daniel

 




Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Hey Daniel,

 

I just wanted to verify my understanding of your response. The background color can be set by the user in the Format Pane, but this cannot be updated programatically in, for example, the visual.ts file?

 

For example, I can update the fill color of the visual programatically with options.element.style.backgroundColor, but doing something similar for the backround color is not possible. This isn't ideal when trying to dynamically set the background color of a visual since the fill area is more limited, as can be seen with the simple button below. There is a large gap (especially when there is a border radius) between the fill area (gray) and the background area (white).

tetra_matt_0-1648713512470.png

I guess I just wanted to verfiy that my understanding of the situation is as I summarize above. Thanks for your investigation in the previous comment, it was very helpful!

 

Best,

Matt

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors