2

I am using the latest version of Grafana (10 as of the time of writing this). I'd like to embed some of my Grafana panels in another place / my own website. However, the light and dark themes of Grafana differ from my website's remaining custom panels vastly.

Does Grafana support / allow theming? I'd like to build a custom theme that would be used on the embedded panels on my website only, while keeping them the same as the rest of Grafana when browsing on Grafana itself. Is that even possible? If not, what is possible in regards of this topic (maybe a plugin such as BoomTheme, but it doesn't seem to work as nothing changes / happens when I install it and I cannot find it anywhere in the settings)? I was searching throughout Grafana docs, but I couldn't find anything related to this.

JrDeveloper
  • 83
  • 7

2 Answers2

0

One way could be to add a text panel with HTML mode in your dashboard and add some custom CSS as content, for example:

<style type="text/css">
[data-testid="header-container"] {
  background-color:red;
}
</style>

text panel

Edit: if you see raw code in text panel display, then ou might need to set disable_sanitize_html in your grafana settings.

enter image description here

then all the dashboard including panels are styled with this CSS and this is a sample panel in kiosk mode with path https://[grafana server domain]/dashboard/new?orgId=1&viewPanel=1&kiosk

kiosk mode panel

pba
  • 700
  • 8
  • 18
  • Unfortunately, Grafana doesn't apply that. It just renders the CSS as plain text in the panel. I tried with using ` – JrDeveloper Jul 18 '23 at 11:37
  • @JrDeveloper It works for me. You might need to set [disable_sanitize_html](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#disable_sanitize_html) in your grafana config. – pba Jul 19 '23 at 10:08
  • Yes, but I need to show charts and stuff and then change the colors of their series, background, etc. The text panel just displays the HTML that I want, but my requirement was to embed an existing panel and then change its color scheme. – JrDeveloper Jul 20 '23 at 07:03
  • I edited my post, the CSS in the text panel is applied to the full dashboard page including the graph panels, not only to the text panel. – pba Jul 21 '23 at 09:16
  • Am I missing something? [clicky](https://i.imgur.com/3FL7U2r.png) – JrDeveloper Jul 21 '23 at 13:59
  • I added screenshots. Have you checked disable_sanitize_html in your grafana settings? – pba Jul 23 '23 at 13:43
  • That does indeed seem to work when it comes to styling the whole dashboard page, but after embedding it, the styles are not applied, to the embedded panel (I am not embedding the text panel, but another one), so it kind of doesn't work for my use case. – JrDeveloper Jul 24 '23 at 07:17
  • If you describe what you mean by "embedded panel" in the question, it would help to get a more meaningful answer. What kind of grafana feature are you using for the "embedded panel"? Is it something different from the "viewPanel" of the graph in my answer? – pba Jul 24 '23 at 12:59
  • So, let's say I have a panel in a dashboard and I want to embed that specific panel on a 3rd party website (e.g my personal home webpage). I go to the panel, and click on `Share`. I copy the embed ` – JrDeveloper Jul 24 '23 at 13:03
  • In that case you can try to apply the solutions of [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe). – pba Jul 24 '23 at 13:27
  • I did try that, but Grafana blocks the injection `Blocked a frame with origin "http:127.0.0.1:5500" from accessing a cross-origin frame.` In my `custom.ini`, I did set `allowed_origins = "*"` but it still blocks the injection, so I couldn't do anything. I have a simple .html file (for testing purposes): `````` – JrDeveloper Jul 24 '23 at 13:34
  • I have a simple .html file (for testing purposes): ```function applyCustomTheme(iframe) { var doc = iframe.contentDocument || iframe.contentWindow.document; var customStyles = '#pagetop { background: green !important; }'; var styleTag = doc.createElement("style"); styleTag.innerHTML = customStyles; doc.head.appendChild(styleTag); } ``` – JrDeveloper Jul 24 '23 at 13:34
0

Grafana does not natively support theming individual panels for embedded use. You may need to use custom CSS or custom panel plugins to achieve specific theming for embedded panels on your website.

Haseeb Sultan
  • 1
  • 1
  • 1
    I figured that much so far, but none of the plugins feature the stuff that I need and I cannot "inject" my own CSS into Grafana unless I recompile Grafana altogether, which I do not want to do. – JrDeveloper Jul 24 '23 at 07:18