Best way to get Grafana chart into Lovelace card


I’m hoping someone has experience with getting Grafana panels into the Lovelace front end. I’ve been able to make it work, but it’s not very pretty. I get the best results using an iframe card and a link to the panel from the Grafana share option.

For example:

This comes from an iframe card configured as:

type: iframe
url: >-
aspect_ratio: 50%

But there are a couple of problems:

  • There is a big grey border between the iframe card edge and the chart
  • There is a strange scroll bar on the right

It would be great to hear from anyone who has experience with making these work better.




Play with the aspect ratio. The graph itself is close to 43%. No idea about the window around it due to the scroll bar, but that would be a good place to start.

Thanks for the suggestion @tom_l, certainly 50% aspect ratio isn’t great. With 80% it is a bit more legible, but it doesn’t address the big border - it actually made it worse along the bottom:

Oddly enough - the scroll bar doesn’t appear this time - although it does seem to come and go with different window sizes.

Any other suggestions would be very welcome!

I think this might be a grafana question not home assistant? My iframe cards don’t have a border but I’m not using grafana.

A quick google suggests the grafana iframe has a frameborder parameter - perhaps try setting that to zero?

Format link to graph like this:


1 Like

Awesome - thanks @LbDab - that fixed the border problem nicely. Unfortunately, I still have the vertical scroll bar - any idea how to get rid of that?

Set your aspect ratio correctly.

Thanks @tom_l for the suggestion, but that doesn’t help. The Lovelace iframe card just adapts its vertical height for whatever aspect ratio I set, but there is always a scroll bar.

Looking closely, the scroll bar actually appears to be part of the grafana graph not home assistant. Can you specify the legend be a list on the graph instead of under it?

The scrollbar does appear to be a grafana issue.

What version of grafana are you on?

1 Like

Ah - very good point. My Grafana version is 5.1.3, which could be suffering the issue you’ve cited. Will update and see what happens.

Awesome - thanks @andrewdolphin - that did the trick. Upgrading Grafana to the current version (6.2.5) fixed the scrollbar problem.

I did have to fix one thing: the new version must have introduced some new security features, one of which is to disable embedding Grafana panels in an iframe by default. Setting the environment variable GF_SECURITY_ALLOW_EMBEDDING=true in the docker container sorted this out.

Thanks all. Now I’m good to go nuts with Grafana charts in Lovelace cards!


On a similar point (or not? I’m just starting out with Grafana) how can I get rid of the scroll bars in Grafana itself. They are showing but there is nowhere to scroll so are a bit redundant.

which grafana share option do you use (link, embed, snapshot)?

Both link and embedd render in lovelace via iframe but don’t update. I was unable to get snapshot to work.

Help appreciated


I think your graph is beautiful. Could you give me your template or the way of working ?

was this ever answered?
I also need help on which way to best share, especially w/v3.0

Does anyone have any additional info? I’m sharing but cannot get the iframe to render in HomeAssistant

Hi All, What settings did you use so that your grafana graph updates in the iframe. Mine only updates the data when I refresh the lovelace interface.

1 Like

I was never happy with the iframe as I could never get it to look or update the way I wanted. I opted instead to use mutliple Command Line Sensors to grab the most recent graph images. I then have those images as part of a Generic Camera. After this I populate the images in my lovelace as a Picture Glance Card.
I also provide a link to the actual Grafana app to access more details if I need.


Nice option ! Could you please share your command line ?
edit: You probably use the http api ? (