Lovelace: Weather card with chart

hajo62 · March 13, 2022, 8:30pm

@Truwolf:
Might you post the code, pls.

tobe · March 26, 2022, 8:15pm

Hello, I was able to solve the issue “Custom element doesn’t exist” on my homeassistant installation with renaming the following items:

file from config/www/weather-card-chart.js to config/www/weather-chart-card.js
ui.nabu.casa/config/lovelace/resources URL from /local/weather-card-chart.js to /local/weather-chart-card.js
Card Configuration: type: from custom:weather-card-chart to custom:weather-chart-card

I recommend checking that the spelling at all three places is as described in Github.
A restart might also be needed and the Card Configuration is a bit hackling.
Good luck

bschatzow · April 4, 2022, 9:36am

I just started using the card, looks great. I see that imperial units are supported. My temperatures show in F, but the wind speed and pressure show in metric. How do I change this?

Mod74 · April 6, 2022, 10:29am

Is there a way to change the font color on the chart? I’m semi-OK using Card Mod, but the elements for the font seem to be hidden behind the canvas. I’ve tried setting the color to : white but it doesn’t affect the font on the chart itself. Thanks.

EDIT. found the easy answer, changing the theme from light to dark swapped the chart labels colour.

mboarman · April 13, 2022, 1:52am

I’m sure it’s obvious but I can’t seem to find how to change the 24:00 hourly output to AM and PM?

DavidFW1960 · April 13, 2022, 2:56am

I don’t think you can

mboarman · April 13, 2022, 3:13am

Thanks for the quick response but I have noticed in serveral earlier posts in this thread that they have found a way to display a 12 hour clock:

DavidFW1960 · April 13, 2022, 3:46am

I don’t see a configuration option for that in the card on github and there is only a zone setting in HA itself so I have no idea how they are forcing that.

mboarman · April 13, 2022, 4:01am

I thought the same thing, I wonder if it’s depended on the weather sensor that is being used? For example, I’m using Openweathermap. Perhaps one of the other ones outputs differently?

DavidFW1960 · April 13, 2022, 4:50am

I don’t think so. the weather entity is pretty standard

mboarman · April 16, 2022, 12:00am

Can someone tell me how the Forecast Options are implimented on this card? I can’t find an example and my attempts have proven to all be failures…I’ve tried this:

      - type: custom:weather-chart-card
        entity: weather.openweathermap
        show_main: false
        show_attributes: false
        forecast:
          labels_font_size: 12
          temperature1_color: rgba(132, 219, 253, 1.0)
          temperature2_color: rgba(132, 209, 253, 1.0)

and I’ve tried this:

      - type: custom:weather-chart-card
        entity: weather.openweathermap
        show_main: false
        show_attributes: false
        labels_font_size: 2
        temperature1_color: rgba(132, 219, 253, 1.0)
        temperature2_color: rgba(132, 209, 253, 1.0)

Neither seem to impact the style of the card?

mboarman · April 16, 2022, 4:32am

Ok…Well after digging into the source code, I’m pretty sure the following forecast options were not included in the current release, perhaps they got blown out during one of the merges?

temperature1_color
temperature2_color
labels_font_size
condition_icons
precipitation_color

All the other variables appear to be working…although I haven’t tested “icons” (custom icon path).

Yevgeniy · April 16, 2022, 4:55am

Here is the source code for the basic configuration. You can try to copy forecast block and change it:

github.com

Yevgenium/weather-chart-card/blob/b661ba5bee99388ff89ffb419f01b392baa15d2f/src/main.js#L43

    
      
              windDirection: {type: Object},
              forecastChart: {type: Object},
              forecastItems: {type: Number}
            };
          }
          
          
setConfig(config) {
            const cardConfig = {
              icons_size: 25,
              ...config,
              forecast: {
                labels_font_size: 11,
                temperature1_color: 'rgba(255, 152, 0, 1.0)',
                temperature2_color: 'rgba(68, 115, 158, 1.0)',
                precipitation_color: 'rgba(132, 209, 253, 1.0)',
                condition_icons: true,
                ...config.forecast,
              },
              units: {
                pressure: 'hPa',
                speed: 'km/h',

GambiniSigi · April 24, 2022, 6:29pm

Hi There.

I am new to this card, and have tried to install it following all the instrunctions in this thread.

I still get the “Custom element doesn’t exist” with the following card entry:

    cards:
      - type: custom:weather-chart-card
        entity: weather.home

image739×239 13.2 KB

I am on 2022.4.6

Does anyone have some good ideas?

GambiniSigi · April 25, 2022, 3:18pm

Update: It appearently solved itself over night. Now it works.

kasper-leFevre · May 5, 2022, 8:24pm

I would really like the option to turn off the temp labels on the graph as @scstraus had mentioned

benm7 · May 10, 2022, 10:52am

Love this card! Is there a way to change the colour of the icons to a different theme variable? Mine seem to stay on primary-text-Color and have tried changing the code in the js without success

benm7 · May 11, 2022, 2:26am

I am also finding I cannot change the colours using the below code and my variables which are in the format “R,G,B”.

          - type: "custom:weather-chart-card"
            entity: weather.dark_sky
            forecast:
              temperature1_color: 'rgba(var(--color-red),1.0)'
              temperature2_color: 'rgba(var(--color-green),1.0)'
              precipitation_color: 'rgba(var(--color-blue),1.0)'

Mariusthvdb · June 28, 2022, 10:26am

is that the latest version of weather-chart-card? Asking because in the repo I see those graphs with the noted numbers (which was reason for me not to upgrade…)

Like that it would be an option for me (if I could ditch the icon in the footer)

also, because I didnt like the new way of this nice card, I just managed to carve out the lines graphs from the old card, and put in in a stack with the adapted custom weather-card by Bram:

will get rid of the gap in between so they look like 1, and hide the ticks and vertical grid:

mikesweden · August 29, 2022, 11:34am

Thank you for a nice card! I wonder how and where I can specify how many days of forecast I want to specify (I would like less than 9 days)