Home Assistant Community

Lovelace: Weather card with chart


Hi @Yevgeniy,

Thank you so much for this card, it is probably my favorite card in all of Lovelace, it gives so much more useful information than the standard weather card. I only have one issue with it, and that is that the day of week labels are wrong on the graph. This makes it a little hard to read, especially since the next segment of the graph can be anywhere from 1 minute to 3 hours away. The screenshot below was taken at 14:00 on Monday, but it’s still showing it as being Sunday. What would be ideal is if it showed the correct day and also time on the graph, as there’s no way to tell when the graph starts.


It’s got the correct data when you click for the detail, though:

Here is the configuration for my openweathermap. Hourly mode is ideal for me because the graph then shows the next 24 hours, which is exactly what I want.

  - platform: openweathermap
    api_key: !secret openweathermap_key
    mode: hourly

I also have another one set up for the next 10 days which has the same problem (screenshot also at 14:06 on Monday, but it’s showing it starting on Saturday).


Here is the detail pane if I click on the top. It seems it might be taking only some of the days, as it’s also starting on Sunday instead of Monday.

Here’s the configuration of the weather component for this graph.

  - platform: darksky
    api_key: !secret darksky_key
    name: Weather Forecast
    mode: daily
    scan_interval: 720

The time on my server is set correctly, but as CET whereas I am in CET+1. However I have the time zone correctly set in my hass config:


  name: Home
  latitude: !secret home_lat
  longitude: !secret home_long
  elevation: 260
  unit_system: metric
  time_zone: Europe/Prague

If you need anything else from my config, it’s up on github. Would be happy to test any new versions which might be able to address these issues.

EDIT: I just noticed that it works properly on the Homeassistant app on iOS but not on chrome… The plot thickens!

Thanks again for a wonderful card!



I solved the issue curve not fitting to the chart by calling reload(true) if any value updated. Also, I found it best to limit the temp axis range to 4 degrees because its not useful to differentiate values that inside one degree.



So, a few updates later and added the mode:hourly option to the hourly and now they seem to be putting the right labels on the graph on both my mobile and chrome finally.

But for some reason, my custom updater doesn’t seem to recognize your card, though it does all my other cards. I have:

    - cards
    - components
    - python_scripts
    - https://raw.githubusercontent.com/pnbruckner/homeassistant-config/master/custom_components.json
    - https://raw.githubusercontent.com/pnbruckner/homeassistant-config/master/python_scripts.json
    - https://raw.githubusercontent.com/rdehuyss/homeassistant-lovelace-google-calendar-card/master/custom_updater.json
    - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json
    - https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json
    - https://raw.githubusercontent.com/nervetattoo/simple-thermostat/master/tracker.json
    - https://raw.githubusercontent.com/sgttrs/lovelace-weather-card-chart/master/custom-updater.json

But my custom updater card still shows as below after many restarts (every card except this one shows up…):

Any idea why that might be?



…And of course as soon as I write about it here, it appears, though it was like this for many weeks after adding it to the config… Okay, as long as it’s there, I’m happy… Sorry to bother you, disregard the above, thanks for the great card.



Awesome work! German translation:

    de: {
    tempHi: "Temperatur",
    tempLo: "Temperatur Nacht",
    precip: "Niederschlag",
    uPress: "hPa",
    uSpeed: "m/s",
    uPrecip: "mm",
    cardinalDirections: [
      'N', 'N-NO', 'NO', 'O-NO', 'O‘, 'O-SO', 'SO', 'S-SO',
      'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'


Portuguese translation. Thanks!

pt: {
tempHi: "Temperatura",
tempLo: "Temperatura Noite",
precip: "Precipitação",
uPress: "hPa",
uSpeed: "m/s",
uPrecip: "mm",
cardinalDirections: [
  'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
  'S', 'S-SO', 'SO', 'O-SO', 'O', 'O-NO', 'NO', 'N-NO', 'N'


Is there a way to convert hPa to mm Hg/s?
Как можно конвертировать гПа в привычные мм рт/с?



Just wait for acceptance of this pull request: https://github.com/sgttrs/lovelace-weather-card-chart/pull/16

1 Like


It seems to me that mode: hourly doesn’t work.

I get this if i use that mode: