CODEWITHSUNDEEP
powerbipowerbi-embedded
Binal M
Binal M

Reputation: 11

Power BI embedded report appears distorted and doesn't apply custom theme

We have embedded a Power BI report in react app. The report uses custom theme. The report looks perfectly fine on Power BI online service. However, few visuals appear distorted, misaligned, change colors, fonts etc. in embedded version. As these visuals appear green in color, my guess is that the visuals are defaulting to classic theme. Following is the error from dev tools

enter image description here

Upvotes: 1

Views: 355

Answers (1)

Kotana Sai
Kotana Sai

Reputation: 1

Now, Power BI embedded analytics have the ability to embed report with a custom theme applied.

  1. One can set custom theme in PBI desktop and embed the report in your app and report gets embedded with custom theme applied.

  2. One can set custom theme to report on report load. When passing embedConfig at the time of embed, you can set the theme inside the embedConfig and then pass the embedConfig. Report gets loaded with custom theme applied.

  3. Using API applyTheme one can set custom theme to a report at runtime

     // Create a theme.

       const theme = {
     "name": "Sample Theme",
     "dataColors": ["#990011", "#cc1144", "#ee7799", "#eebbcc", "#cc4477", "#cc5555", "#882222", "#A30E33"],
     "background": "#FFFFFF",
     "foreground": "#007799",
     "tableAccent": "#990011"
 };


 // Update the theme by passing in the custom theme.
 // Some theme properties might not be applied if your report has custom colors set.
 try {
     await report.applyTheme({ themeJson: theme });
     console.log("Custom theme applied, to remove custom theme, reload the report using 'Reload' API.");
 }
 catch (error) {
     console.log(error);
 }

Refereneces: https://learn.microsoft.com/javascript/api/overview/powerbi/apply-report-themes https://learn.microsoft.com/power-bi/create-reports/desktop-report-themes#situations-when-report-theme-colors-wont-stick-to-your-reports

Upvotes: 0

Related Questions