Lovelace: Weather card with chart

You’ll find it above, where i shared the full code
Well, maybe not… here you go

type: vertical-stack
  - entity: weather.forecast_home
    show_current: false
    show_forecast: true
    type: weather-forecast
      style: |
        ha-card {
          font-size: 0pt;
          margin: -60px -20px -80px 30px;
        ha-card div.forecast div.temp {
          font-size: 0pt;
        ha-card div.forecast div.forecast-image-icon svg {
          width: 35px;
          height: 35px

Thank you I will have a play around.

I have “Custom element doesn’t exist: vertical-stack-in-card.” :frowning:

Install it then, either manual or through HACS

1 Like

I did it with hacs but it doesn’t work

Reboot ha, not restart … and … again again again and again

Yeah it’s kind of a pain in the ass that one. I’ve found I have to move the card into the hacs folder rather than the subfolder that hacs installs it in.

This project is not being actively maintained, if anyone has a good alternative let me know - it sure would be nice to have a working solution in the main HA, and if not that in HACS.

The card works fluently here

Hhm, strange.
It work for a long time but some days ago, stopped working:

Had installed via HACS.
Tried a remove and a reinstall. As well as moving from custom_components/hacs to www/community.

honestly, I feel we’re better off moving away from this card, in all of our efforts to mimic it… there are several viable options to replace it, and make it even more flexible.

personally I use several separated cards, and get what I want.

just fiddled about with this:

  - type: entities
      - entity: weather.buienradar
            hui-generic-entity-row $: |
              .info {
                display: none;
        type: custom:multiple-entity-row
        toggle: false
        show_state: false
        state_color: false
          - entity: sensor.buienradar_temperature
            name: Temp
          - entity: sensor.buienradar_wind_force
            name: Bft
          - entity: sensor.buienradar_wind_direction
            name: Richting
          - entity: sensor.buienradar_pressure
            name: Lucht
          - entity: sensor.buienradar_precipitation
            name: Neerslag
          - entity: sensor.buienradar_goes_irradiance
            name: Zon
          - entity: sensor.buienradar_humidity
            name: Vocht
#           - entity: sensor.buienradar_barometer
#             name: Bar

to make a single entity entities card show like

could have done something like this with button-card probably, and even ditch the multiple-entity-card, which ofc is yet another custom card required for this…

I’ll have a look if I can outline the names in a straight horizontal line, but other than that combine it with

and have all I need :wink: maybe already more than that, since it doubles some info…

1 Like

I replaced mine with 2 separate cards, that looks quite similar to the original (and can be gui-reconfigured to show other attributes):

Todays weather via platinum-weather-card and card-mod to remove empty spaces for the first row:

type: custom:platinum-weather-card
card_config_version: 8
entity_forecast_icon: weather.home
entity_forecast_icon_1: weather.home
entity_forecast_max: weather.home
entity_forecast_max_1: weather.home
entity_forecast_min: weather.home
entity_forecast_min_1: weather.home
entity_humidity: weather.home
entity_pop: weather.home
entity_pos: weather.home
entity_pos_1: weather.home
entity_pressure: weather.home
entity_summary_1: weather.home
entity_sun: sun.sun
entity_temperature: weather.home
entity_wind_bearing: weather.home
entity_wind_speed: weather.home
option_color_fire_danger: false
option_locale: de
option_show_overview_decimals: false
option_show_overview_separator: false
option_static_icons: false
option_time_format: 24hour
option_today_rainfall_decimals: false
option_today_temperature_decimals: false
  - overview
  - extended
  - slots
  - daily_forecast
show_section_daily_forecast: false
show_section_extended: false
show_section_overview: true
show_section_slots: true
slot_l1: forecast_min
slot_l2: remove
slot_l3: remove
slot_l4: sun_next
slot_l5: remove
slot_l6: remove
slot_l7: remove
slot_l8: remove
slot_r1: forecast_max
slot_r2: remove
slot_r3: remove
slot_r4: sun_following
slot_r5: remove
slot_r6: remove
slot_r7: remove
slot_r8: remove
  style: |
    .top-left {
      height: 60px;
      margin-top: 0px;
    .big-icon { 
      height: 100%; 
      width: 100%;
    .slot-section { 

and 5day forecast via apex charts:

type: custom:apexcharts-card
graph_span: 5d
  start: day
  offset: +1d
  show: false
  show_states: false
  stroke_width: 2
    func: last
    duration: 1d
    start_with_last: true
  show: true
      columnWidth: 30%
    show: false
      format: ddd
      enabled: false
      format: ddd dd. MMM.
  - id: temp
    min: ~0
    max: auto
    decimals: 0
  - entity: weather.home
    name: min.
    yaxis_id: temp
    unit: °C
    type: line
    color: green
    data_generator: |
      return => 
        var date = new Date(entry.datetime);
        return [date, entry.templow];
      datalabels: false
  - entity: weather.home
    name: max.
    yaxis_id: temp
    unit: °C
    type: line
    color: '#FFBF00'
    data_generator: |
      return => 
        var date = new Date(entry.datetime);
        return [date, entry.temperature];
      datalabels: false
  - entity: weather.home
    name: Precip
    yaxis_id: mm
    unit: mm
    type: column
    color: '#6495ED'
    data_generator: |
      return => 
        var date = new Date(entry.datetime);
        return [date, entry.precipitation];
      datalabels: true


thx, thats a nice alternative.

Can confirm it to work nicely, using Buienradar as weather source here.

I have custom element doesn’t exist error after updating HA to 2023.7.3, but it was working before.


I see the same. I removed the integration via HACS and reinstalled, I removed the folder manually and reinstalled via HACS. And checked on a second computer with Firefox and Chrome and I cleared the caches.
All times the same result.

2023.9 introduced changes related to forecast data.
Seems that the card need to be updated to support these changes.
Created an issue.

I think this only affected the BOM weather integration and there is a fix PR already waiting to be merged

The issue you created is not even for this card

It is for the card from the 1st post.

Ah crap you’re right. My bad. Sorry about that

1 Like


Do you mind sharing your config for this card ? Looks very awesome !