Lovelace: Weather Chart Card

Weather Chart Card

I created my own version of the old weather chart card since there where no development activities for a long time. It is supporting the new way of getting the weather data that was introduced in 2023.9. Also added a lot of other features…

Instructions

Please visit the GitHub repository for installation and usage instructions.

Let me know if you have any questions. In case of spotted issues or if you have any suggestions please add an issue on github.

18 Likes

Oh wow this looks amazing!

1 Like

This is really amazing, great work @mlamberts78 ! Testing it as we speak and already it just looks and works so good! I do have some feedback.

The documents regarding custom icons isn’t very clear (a little confusing). The screenshot makes it seem you need to use those names. However, you need to match the names like in the code you linked, but easy to miss (which I missed to and couldn’t understand why it wasn’t working). Also in the code for someone that doesn’t have basic coding experience, it might be confusing what the name should be. Is it rain.svg or rainy.svg. I’d suggest just putting the list with correct names on the ReadMe and the corresponding condition, so it’s more clear. Like in a table like the rest of the variables.

Also, I couldn’t load in custom icons, unless I used the example path local/weather-icons. I tried other paths first (because i have my own assets folder), but the svg’s never loaded. Using the example path, did work. So it seems it’s hardcoded to that path.

I downloaded a few animated SVG’s from Meteocons | Bas Milius — Full-Stack Developer (which look amazing). I matched all names and put them in this zip folder if anyone else wants to use them as well. Credits to the creator of these SVG’s (link to the site).

Link to custom icons: https://file.io/bE4dJwAMQHmd. Just extract zip, and put the folder in /local/ (/www/`

Gif of my setup with custom icons in my day and night Dashboard themes:
msedge_3IxvenXwHH

night

1 Like

Thanks, very nice icons! I will make an option available in the next release to switch to this animated icons.

3 Likes

Can you please share the files again? tells me they have been cancelled.
I tried to download them from the original site but a couple of icons are missing.
Thank you!

I uploaded it to my personal Google Drive, so it won’t be deleted again :slight_smile:

@mlamberts78 in case you still need the files, you can download them from here too.

@mlamberts78 - thanks for the work on this. I used the old version but recently it stopped working and so I switched to this updated version but I still have the issue.

I think the issue is related to the bug report - Weather Chart Card incompatible with HA 2023.12.1 · Issue #55 · mlamberts78/weather-chart-card · GitHub

Do you have any updates on this or is there nothing I can do?

Today the card just started working. Not sure how but maybe related to a HACS update?

Is it possible to reduce the height of the whole card or especially of the middle part with the bars?

I’ve been waiting for this for a long time, thank you very much for your efforts.
Where can I set it so that I can see more than 5 days?
Or do I have the wrong source for the weather and there are only 5 days available?

Is there a way to change the orange/blue line colour of the cart? UI element shows as div class=“chart-container” for me, but 'm beyond my depth with card-mod, and can never figure out how to link/couple what I find it UI against how to present the card mod style coding.

Hi, I have only the max temp bar in the forecast chart… There is not option for that. What could be the problem ? Thanks for help.

Looking at your card, those looks like hourly data, so there is likely only one temperature reading per hour. (wait… ok… not per hour but every 3 hours.)

If you want min and max temperature, then you will want to feed the daily data to the card.

data are coming from openweather, they shoud have min/max being hourly or daily. tried to change to daily but still the same, only max temp.

For some reason the day or date in the weekly forecast is not displayed anymore. Set both in code editor to true. Any idea?
Thanks for help!

I installed the card via Hacs, it then showd in the Lovelace Card selection page. I created my first card and it worked.

Went in the YAML configuration to add a custom:config-template-card so I could template the title field (wich did not work unfortunatly) so I remove the card, tried to configure a new card BUT the weather-chart-card is no more in the list of the card in the lovelace interface.

Tried removing and re-install in hacs but the card does not re-appear in the card list page.

I have check and it is in the ressources, I cleared my browser cache, restarted home assistant but nothing to do. I can’t get it back so I removed the card from ressources, uninstall from hacs, restarted, re-installed, restarted and it wasd back

my question is :slight_smile: “Is it possible that we can’t use the config-template-card in the weather-chart card?”

If so, is there a way we can template a sensor entity as the title ?

thanks fr any help

I love this card, great job. In fact I removed the digital clock card off my house information screen and using the date and time from your card instead since it’s so customizable.
Is there any way to flip flop the sides that the time/date and current weather are displayed? I’d love to put the time on the left side in a much larger font than the rest of the items.

Hey, great work. Have been using the old one for few years but changed to this one now that I started to have problems with the old.

With this one I seem to have a problem that the graphs don’t update automatically. I.e. if I have not updated the UI manually the weather graph could still show I.e. weather from morning at the evening. Is this expected behavior? I did not have this with the old one…

To elaborate a little more, we have tablet on the wall which shows weather, electricity price and consumption and controls the most typical lights in the home page. Typically the tablet is only used to control the lights and if you don’t change the UI tab or reload the UI, the weather graph can show really old data from yesterday or few hour back or whatever…

Really like the precipitation representation. Good work!

This is such a great upgrade! Thanks for your hard work!

Is anyone else experiencing the following issue? – When this card is up on my wall mounted tablet, I’ve found the forecast section doesn’t update and gets “stuck” on a time window. For instance, today is Friday, but it still shows Thursday’s forecast (thursday thru weds), instead of updating to the forecast starting on Friday. On page reload, it loads properly… but then gets stuck again the next day.

Curious if anyone else has seen something like this. Not sure if it’s something to do with the card, how I’m using the card, or a broader setup issue I have. Thanks!