Power BI provides a vast amount of visuals out of the box that can create really impressive reports with just a few clicks. However, there are certain scenarios where we need even more tools to visualize our data in a more expressive way. For these edge cases, Microsoft provides the Custom Visuals SDK for Power BI, which lets us create stunning visualizations based on well-known JavaScript libraries such as D3, among others.

In this article we will go through different scenarios where styling programmatically these custom visuals might be a challenge. A sample demo where all these cases are attended, alongside with a more technical documentation - can be found on this repository.

‍

First Case: Styling our visual from the formatting panel

We can style our visualization using pure CSS. This will make the visual get the look we want, but it will be static. Wouldn’t be great if we could style our custom visual the same way we do it for the Power BI built-in ones?

The SDK gives us the flexibility to dynamically change styling options we specify on the formatting panel. Change the text size, row background color, header background color and any other property that you want.

‍

‍

This is great because our users won’t notice any difference in the way they use to design their reports.

‍

Second Case: Apply built-in theme colors to our custom visual

What if you want to apply design changes to your entire report, such as using corporate colors, changing icon sets, or applying new default visual formatting? Power BI offers built-in themes that change the look of all the visualizations in your report with just one click.

These report themes can be selected by navigating to the View ribbon, then selecting the drop-down arrow button in the Themes section of the ribbon, then selecting the theme you want.

The problem with it is that only built-in visuals will be affected by it. We need a way to get the colors from the theme and then apply them on the custom visual:

‍

‍

We can see in our sample how the headers’ background colors are targeted by the built-in theme colors. Follow our sample documentation to see how we did it.

‍

Third Case: Target our custom visual from a custom theme

We can not only use the Power BI built-in themes but also create our own. Custom report themes are created by us using a JSON file that gives us full control over our report’s default look and feel, on a granular level.

The following is a sample of how we defined this JSON file. The first properties are consumed by any other visual our report might have and the latter ones are specifically targeted to our custom visual name stylingCustomVisual:

‍

‍

Once we load our custom theme, our visualization will be updated with the properties defined. In this case, we are only targeting the font-size and row background color:

‍

‍

That’s it. Our custom visualizations are now styled through the different ways Power BI has to offer.

Go ahead and download our sample report to start customizing the style of your own visuals!

Originally published by Hernan Demczuk for SOUTHWORKS on Medium 08 January 2021