Lovelace: Weather card with chart

Nope, It doesn’t work, I tried with:

Lovelace’s resource:
image

Manual Card Config:

Also, can I add my own sensor for humidity and pressure? I have my own weather station.

1 Like

OK, fixed it. When adding a resource to Lovelace all you need to do is make sure it doesn’t contain:

“resources: - type: module url:” but just the link to the card.

The question still stands, can I replace weather humidity and pressure with my own sensor data?

If the card uses the weather entity no. There are custom cards you can use that will let you though.

beta 2021.6 throws a warning on. raised an issue in the repo

bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead

I dont know yet how to replace that in the resource, so Ive commented the line completely, and seeing no difference :wink:

however, it might be nice to know how to correct the code, so if anyone would be able to help out here?
thanks!

Update

I did add this in the datasets list:

          {
           maxBarThickness: 15,
          },

and see no errors. However, I dont see anything changed either, so not sure this does anything at all…

it is loaded correctly alright:
Schermafbeelding 2021-05-31 om 11.55.16

just as a FYI: this card is broken as of 2021.7, because of changed core charts.
Dont have details yet, but running the beta now, and it is chartless :wink:

1 Like

and 2 fixes are live!:

PR by @koying Bump to ChartJs3 (mandatory for 2021.7). Fixes #59 by koying · Pull Request #60 · Yevgenium/lovelace-weather-card-chart · GitHub
and a fork by @fancygaphtrn GitHub - fancygaphtrn/lovelace-weather-card-chart: Custom weather card with charts

now that this is fixed, I notice my ll(str) doesnt work, and it always shows the locale.en… guess because my HA instance uses the English language I never noticed, but I do in fact have a weather-card-chart config using:

      type: custom:weather-card-chart
      title: Woensdrecht
      weather: weather.buienradar
      temp: sensor.buienradar_feel_temperature
      locale: nl

so I want it to display the nl strings. Anyone else notice this?

should this line:

this.lang = this._hass.selectedLanguage || this._hass.language;

be changed to use the this.config.locale ?

edit, yes, it should:

    this.lang = this.config.locale || this._hass.language;

does the trick… cant believe we never stumbled over this before?

here’s my adaptation with animated icons:

3 Likes

Installed your animated adaption, but somehow my tooltip-dates are a day off…
Today (sunday) the chart is from monday until friday, but the tooltip dates are for tuesday until saturday.
Data in the chart is however correct

this is what I see:


dates, days and values seem ok?

image

you certainly dont have the animated version :wink:
and you don’t have the pressure entity either?

depending on the weather entity you are using, you might have different forecast settings.
So, I guess the question is: what is your config?

Hi, i have a problem with tooltip date.Problem

And, another question, it’s possible to move the actual temperature at right side.
Thanks

yes, change to:

        .main div {
          cursor: pointer;
          position: absolute;
          right: 0.5em;
        }


on the tooltip error: do you see anything in inspector?

Chenge the line, now the temperature is on the right, but missing all animated icon.

you’re a bit brief in your descriptions, so maybe check this My adapted animated weather-card-chart · GitHub

which works for me

Ok, works now.
I had probably misspelled. What editor do you use to edit the .js file?
if I wanted to reduce the space between the forecast icon and the part with the wind, sunrise and sunset data, what should I change?

If you want, can you add a Italian translate:

  it: {
    tempHi: "Temperatura Massima",
    tempLo: "Temperatura Minima",
    precip: "Precipitazioni",
    uPress: "hPa",
    uSpeed: "Km/h",
    uPrecip: "mm",
    uVisib: "km",
    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'
    ]
  },

Hello.
In my spare time, I make a new card. I would like to make it more customizable and cleaner. I’m going to publish the source code on github, so your feedback is very important to me. Is the new design better? Or is the current version preferable for you? Or maybe you can suggest something completely different? Thanks.

Screenshots (new design)

image
image

Screenshots (current design)

image
image

3 Likes

I would definetely go for the new version!

New version is more beautiful.
Can you add animated icon, how did he do Mariusthvdb?
Thanks

Yes. In the new version it will be possible to use the amCharts and MDI icons.

Screenshot

Anyone have any advice on a nice set of weather icons? (except for the amCharts icons which have already been tested)