Best way to get Grafana chart into Lovelace card

all my platform runs inside dockers

What does your picture entity card config look like ?

I cannot get mine to show the image.

Br Morten

This is the picture entity card code:

entity: camera.grafana_termo_consumo
name: termo
type: picture-entity
aspect_ratio: 50%

@revin re you running Grafana 3.x.x ingress in Hassio?

1 Like

I got Grafana Image Rendering working on my Raspberry Pi 4 with Docker.

More info here:


After a few days of trying and searching for possible solutions on the forum here, I would like to post the problem I’m having with getting Grafana charts in a lovelace card through the suggested ‘generic camera’ approach.


  - platform: generic
    name: grafana_current_power
    still_image_url: ''
    username: !secret grafana_user
    password: !secret grafana_password
  - platform: generic
    name: weather_oslo
    content_type: 'image/svg+xml'


  - title: Stroom & Gas
      - type: picture-entity
        entity: camera.grafana_current_power
      - type: picture-entity
        entity: camera.weather_oslo
      - type: iframe
        id: grafana_iframe
        aspect_ratio: 65%

This results in 2 out of 3 cards working:

  1. The generic camera with the Grafana still image is not working (camera.grafana_current_power)
  2. The weather image is working (camera.weather_oslo)
  3. The iframe card with Grafana chart is working. However, this is not my preferred solution because it sometimes gives me a 401: Unauthorized error.

Clicking the picture-entity card opens a pop-up with an empty image:
Aantekening 2020-01-03 140619

Opening the still_image_url in the browser works fine.

The only related log entries I see (debug level):

2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.auth] Authenticated for /api/camera_proxy/camera.grafana_current_power using signed request
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/camera_proxy/camera.grafana_current_power to (auth: True)
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/energy-usage to (auth: False)

Hopefully someone can help me out.

Can somebody push me in the right direction here? I tried to do the same configuration from scratch but I’m still running into the same issues. Any suggestion is appreciated.

I spent quiet some time reading about the options, but did not see comments on using the iframe with the “embedded” export from Grafana, and it look very sharp!!

The link I used on the iFrame can be grabed from the “share->embedded” menu option. The url looks like this:

<iframe src="" width="450" height="200" frameborder="0"

But you only want the URL, from http… to …frameborder=“0”
Then you get something like this:

I still could not find out how to update the time window on the iframe, since updating it back in the chart does not reflect on the iframe.

As @darkd mentioned below, you can make the time window variable by removing the from=1579943642055&to=1580548442055&


If you remove this part : from=1579943642055&to=1580548442055

the graph will show the last period specified with grafana for this graph (auto update)


Thank you @darkd, this solves it. Now we can easily map Grafana graphs/objects into Lovelace and have them auto update.
:pray: :pray: :pray:

1 Like

You’re welcome :wink:

btw, noticed it works well via chrome on the PC but via the mobile app I get 401: Unauthorized and no image

It’s probably because grafana URL is http not https. Mobile browsers/app are less permissive about security.

Following @joaofl @darkd suggestion re embedded link from Grafana, using that url in an iFrame in lovelace.
However on other devices, it sends me to login page of grafana.

Any ideas how to pass the user / pass as part of the iFrame Grafaba https url?

Add this under config in Grafana addon:

“env_vars”: [
“value”: “true”

@realmadridsi Thanks, assume this is hassio.

Using separate docker containers here but adding GF_AUTH_ANONYMOUS_ENABLED means anyone with my https grafana address can gain access without login no?

this morning I’m getting 401 Unauthorized across all access methods. Images & updates are not getting through to Lovelace :slightly_frowning_face:

Yes, that is a problema that seems to affect the hassio due to the containers.
What you have to do to overcome that is:

  1. Make grafana available from a different port:

Then update your uri to the one corresponding to the new port.

In principle, the same chart with the same api would be available on the new port. However, in my case, I had to copy and paste my dashboard from the instance at port 8123 to that one on port 3000.
After that, I can access my charts from the mobile app as well.

Yes assuming Hassio, you can also just adjust the grafana.ini file by setting it to true.

I’ve seen a lot of posts about this and I’m not sure if I’m just missing some big caveat or something else, but all I had to do to get my Grafana graphs and gauges rendering (and refreshing) in Lovelace was add an iframe card and set the URL to my graph with refresh set and the view mode on Grafana’s “Kiosk” mode (fullscreen).

Step by step instructions are below, but if you want to shortcut them just make sure that you’ve added the following to the query string of your URL:


Step 1: Open the Grafana dashboard that holds the chart you want to display on your Lovelace card

Step 2: Click the Refresh drop-down at the top right and select the desired refresh rate (this is required if you want your graphs to automatically update)

Step 3: Click the Time Range drop-down and select or specify the time range that you would like to display data from

Step 4: Click the “Cycle view mode” button at the top until you enter Kiosk mode (fullscreen-like view)

Once you enter Kiosk mode, you should see a green notification to let you know that you can press “ESC” to exit Kiosk mode:

Step 5: Click on the title for the chart you wish to display and choose "Share"

Step 6: Disable the “Current time range” toggle on the resulting window, then copy the URL into your Lovelace UI configuration (the “Current time range” toggle effectively converts your selected time range into an absolute time range, thus if this is selected your chart will never update)

The finished product: (note that I managed to take this screenshot while the “Brightness (%)” graph was refreshing, which is why you can see the spinner GIF at the top right of the chart)