Weather-card-chart missing chart

Using @scstraus Weather Card Chart (GitHub - scstraus/lovelace-weather-card-chart: Custom weather card with charts) and it’s been awesome for well over a year. Recently, the chart has dissappeared:

image

The icons are still visible for the periods, but it’s no longer graphing the temperature(s). Have tried other weather.xxx integrations and same thing is happening.

Curious if anyone else has seen the same, if it’s still being maintained or if I need to find a replacement - which would be sad since it’s great…

Thx!

Hi Markus… Yes others are reporting that issue too. @Mariusthvdb Mariusthvdb also had a fork which died too. I have been dragging my feet on upgrading because I don’t feel like dealing with it. There are some people getting some pretty good results with Apex Charts. We will see how the situation develops, but I might also go this route as I don’t probably have the time and skill to maintain this version of the card alone.

This guy fixed the missing graphs, in firefox, with this fork

Then lately something else happened ( In Ha / Firefox ) who knows, or maybe it was just my setup, that got f…up

Any ways i replaced the .js with this, with some modifications

console.info(
  `%c  WEATHER-CHART-CARD  \n%c  Version 0.2`,
  'color: orange; font-weight: bold; background: black',
  'color: white; font-weight: bold; background: dimgray',
);

const locale = {
  da: {
    tempHi: "Temperatur",
    tempLo: "Temperatur nat",
    precip: "Nedbør",
    uPress: "hPa",
    uSpeed: "m/s",
    uPrecip: "mm",
    uVisib: "km",
    cardinalDirections: [
      'N', 'N-NØ', 'NØ', 'Ø-NØ', 'Ø', 'Ø-SØ', 'SØ', 'S-SØ',
      'S', 'S-SV', 'SV', 'V-SV', 'V', 'V-NV', 'NV', 'N-NV', 'N'
    ]
  },
  en: {
    tempHi: "Temperature",
    tempLo: "Temperature night",
    precip: "Precipitations",
    uPress: "hPa",
    uSpeed: "km/h",
    uPrecip: "mm",
    uVisib: "mi",
    cardinalDirections: [
      'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
      'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
    ]
  },
  fr: {
    tempHi: "Température",
    tempLo: "Température nuit",
    precip: "Précipitations",
    uPress: "hPa",
    uSpeed: "m/s",
    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'
    ]
  },
  nl: {
    tempHi: "Max temperatuur",
    tempLo: "Min temperatuur",
    precip: "Neerslag",
    uPress: "hPa",
    uSpeed: "km/u",
    uPrecip: "mm",
    uVisib: "km",
    cardinalDirections: [
      'N', 'N-NO', 'NO', 'O-NO', 'O', 'O-ZO', 'ZO', 'Z-ZO',
      'Z', 'Z-ZW', 'ZW', 'W-ZW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
    ]
  },
  ru: {
    tempHi: "Температура",
    tempLo: "Температура ночью",
    precip: "Осадки",
    uPress: "гПа",
    uSpeed: "м/с",
    uPrecip: "мм",
    uVisib: "км",
    cardinalDirections: [
      'С', 'С-СВ', 'СВ', 'В-СВ', 'В', 'В-ЮВ', 'ЮВ', 'Ю-ЮВ',
      'Ю', 'Ю-ЮЗ', 'ЮЗ', 'З-ЮЗ', 'З', 'З-СЗ', 'СЗ', 'С-СЗ', 'С'
    ]
  }
};

class WeatherChart extends Polymer.Element {

  static get template() {
    return Polymer.html`
      <style>
        ha-icon {
          color: var(--paper-item-icon-color);
        }
        .card {
          padding: 16px;
        }
      </style>
      <ha-card header="[[title]]">
        <div class="card">
          <ha-chart-base data="[[ChartData]]" options="[[ChartOptions]]" ></ha-chart-base>
        </div>
      </ha-card>
    `;
  }

  static get properties() {
    return {
      config: Object,
      mode: String,
      weatherObj: {
        type: Object,
        observer: 'dataChanged',
      },
    };
  }


  setConfig(config) {
    this.config = config;
    this.title = config.title;
    this.weatherObj = config.weather;
    this.mode = config.mode;
    if (!config.weather) {
      throw new Error('Please define "weather" entity in the card config');
    }
  }

  set hass(hass) {
    this._hass = hass;
    this.lang = this.config.locale in hass.states ? hass.states[this.config.locale] : this._hass.language;
    this.weatherObj = this.config.weather in hass.states ? hass.states[this.config.weather] : null;
    this.forecast = this.weatherObj.attributes.forecast.slice(0,9);
  }

  dataChanged() {
    this.drawChart();
  }

  ll(str) {
    if (locale[this.lang] === undefined)
      return locale.en[str];
    return locale[this.lang][str];
  }

  drawChart() {
    var data = this.weatherObj.attributes.forecast.slice(0,9);
    var tempUnit = this._hass.config.unit_system.temperature;
    var lengthUnit = this._hass.config.unit_system.length;
    var precipUnit = lengthUnit === 'km' ? this.ll('uPrecip') : 'in';
    var mode = this.mode;
    var i;
    if (!this.weatherObj.attributes.forecast) {
      return [];
    }
    var dateTime = [];
    var tempHigh = [];
    var tempLow = [];
    var precip = [];
    for (i = 0; i < data.length; i++) {
      var d = data[i];
      dateTime.push(new Date(d.datetime));
      tempHigh.push(d.temperature);
      tempLow.push(d.templow);
      precip.push(d.precipitation);
    }
    var style = getComputedStyle(document.body);
    var textColor = style.getPropertyValue('--primary-text-color');
    var dividerColor = style.getPropertyValue('--divider-color');
    const chartData = {
        labels: dateTime,
        datasets: [
          {
            label: this.ll('tempHi'),
            type: 'line',
            data: tempHigh,
            yAxisID: 'yTempAxis',
            borderColor: 'red',
            backgroundColor: 'orange',
            borderWidth: 2.0,
            lineTension: 0.4,
            pointRadius: 1.0,
            pointHitRadius: 5.0,
            fill: false,

            tooltip: {
             callbacks: {
               label: function(context) {
                 var label = context.dataset.label || '';
                 return label += ': ' + context.parsed.y + tempUnit;
               }
             }
           }
           },

          {
            label: this.ll('tempLo'),
            type: 'line',
            data: tempLow,
            yAxisID: 'yTempAxis',
            borderColor: 'green',
            backgroundColor: 'purple',
            borderWidth: 2.0,
            lineTension: 0.4,
            pointRadius: 0.0,
            pointHitRadius: 5.0,
            fill: false,

            tooltip: {
             callbacks: {
               label: function(context) {
                 var label = context.dataset.label || '';
                 return label += ': ' + context.parsed.y + tempUnit;
               }
             }
           }
          },
          {
            label: this.ll('precip'),
            type: 'bar',
            data: precip,
            yAxisID: 'yPrecipAxis',
            borderColor: 'skyblue',
            backgroundColor: 'steelblue',
            maxBarThickness: 15,
            barThickness: 8,
            tooltip: {
             callbacks: {
               label: function(context) {
                 var label = context.dataset.label || '';
                 return label += ': ' + context.parsed.y + precipUnit;
               }
             }
           }
          },
        ]
      }

    const chartOptions = {
        animation: {
          duration: 300,
          easing: 'linear',
          onComplete: function (animation) {
            var chartInstance = animation.chart,
              ctx = chartInstance.ctx;
            ctx.fillStyle = textColor;
            var fontSize = 10;
            var fontStyle = 'normal';
            var fontFamily = 'Roboto';
            ctx.font = fontStyle + ' ' + fontSize + 'px ' + fontFamily;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            var meta = chartInstance.getDatasetMeta(2);
            meta.data.forEach(function (bar, index) {
              var data = (Math.round((chartInstance.data.datasets[2].data[index]) * 10) / 10).toFixed(1);
              if (data > 0)
                 ctx.fillText(data, bar.x, bar.y - 5);
            });
          },
        },
        legend: {
          display: false,
        },
        scales: {
          xAxes: {
            type: 'time',
            adapters: {
              date: {
                locale: this._hass.locale,
              },
            },
//             display: true,
            ticks: {
              display: false,
            },
            grid: {
              display: false,
            },
          },
          xDateAxis: {
            type: 'time',
            position: 'top',
            adapters: {
              date: {
                locale: this._hass.locale,
              },
            },
            grid: {
              display: true,
              drawBorder: false,
              color: dividerColor,
            },
            ticks: {
              display: true,
              source: 'labels',
              autoSkip: true,
              color: textColor,
              maxRotation: 0,
              callback: function(value, index, values) {
                var date = new Date(0);
                date.setUTCMilliseconds(values[index].value);
                if (mode == 'hourly') {
                  return date.toLocaleTimeString(locale, { hour: 'numeric' });
                }
                return date.toLocaleDateString(locale, { weekday: 'short' });;
              },
            },
          },
          yTempAxis: {
            position: 'left',
            adapters: {
              date: {
                locale: this._hass.locale,
              },
            },
            grid: {
              display: true,
              drawBorder: false,
              color: dividerColor,
              borderDash: [1,3],
            },
            ticks: {
              display: true,
              color: textColor,
              callback: function(value, index, values) {
                 return value + 'º';
               },
            },
            afterFit: function(scaleInstance) {
              scaleInstance.width = 37;
            },
          },
          yPrecipAxis: {
            display: false,
            position: 'right',
            suggestedMax: 20,
            adapters: {
              date: {
                locale: this._hass.locale,
              },
            },
            grid: {
              display: false,
              drawBorder: false,
              color: dividerColor,
            },
            ticks: {
              display: false,
              min: 0,
              color: textColor,
            },
            afterFit: function(scaleInstance) {
              scaleInstance.width = 15;
            },
          },
        },
        plugins: {
           tooltip: {
             callbacks: {
               title: function(context) {
                 return new Date(context[0].label).toLocaleDateString(locale, {
                   month: 'long',
                   day: 'numeric',
                   weekday: 'long',
//                    hour: 'numeric',
//                    minute: 'numeric',
                 });
              }
            }
           }
        },
      }
    this.ChartData = chartData;
    this.ChartOptions = chartOptions;
/*    this.ChartType = chartType;*/
  }

  _fire(type, detail, options) {
    const node = this.shadowRoot;
    options = options || {};
    detail = (detail === null || detail === undefined) ? {} : detail;
    const e = new Event(type, {
      bubbles: options.bubbles === undefined ? true : options.bubbles,
      cancelable: Boolean(options.cancelable),
      composed: options.composed === undefined ? true : options.composed
    });
    e.detail = detail;
    node.dispatchEvent(e);
    return e;
  }
}

customElements.define('weather-chart-card', WeatherChart);

Not sure which fork this came from, but i just change the name ( added -CARD ) as he had renamed it ( Weather-Chart ) only

PS: Might have been copied from one of Marius , modded-forks

PS_2: i was actually sitting today and “fiddling” with this .js, trying to remove the “bubbles”, to get a nice smooth graph … didn’t turned out well :(, but i might give it a try another day

PS_3 i added above fork through HACS, and then replaced the .js ( just for the record ) :slight_smile:

certainly looks like it :wink: but, if you did, it wont work…
so please tell us, by showing a screenshot, if the hover popups on the graph dont show ‘Invalid date’ as they started doing in my config?

ok, thx, i though it was your, as i twice have copied something related to this card, from you :slight_smile:

day

hour

PS: The weather is not “modded”, it’s just that " the sun always shines my screen " , at-least for a accidental split moment

thats not mine, I was still using the former layout, but I certainly will check why this now started working again.

if I compare the js resource though, it is exactly copied from mine indeed, so I dont understand how your chart looks the way it does here :wink:

more over I cant understand why it doesnt in my config while on the essential spots is exactly the same…

what is your card config like, and also, dd you check to set it in another language, because I seem to remember that was what made it faulty in mine. English ok, Dutch stopped working, so an issue with the selected HA language vs the locale, or the browser language

That was my first thought, month ago, when i copied it, It was for the nice lines ( So i thought ) but there were absolutely no changes to the graphs or colors, so i wonder how this "rendering of the HACS-files works, i never bother to ask you then, but yes i was dissapointed, because i didn’t get the same result as you shoved in picture, and i have also tried to “edit” this file, with no luck, so somewhere something is Stored

My cardconfig varies , these 2 i just made default in a hurry

type: custom:weather-chart-card
entity: weather.forecast_home
show_main: false
show_attributes: false
icons: /local/weather-icons/shadows/

thx, ill test.
languages? system and profile are set to English?

o well nevermind, Ive tried to rebuild my chart hack card with these settings, but it wont show at all, just an empty card…

not worth the trouble I guess, we got other ways of charting the next few days…

Still if your using firefox, you need the fork above from greendog, and yes my setting is english all through

no not using FF.
tbh, when a card has that many considerations, it should be considered obsolete, and imho, taken out of the config to not create issues inside.

FWIW, tried a different route. Created a bunch of custom sensors and then used the custom:bar-card (GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace [available via HACS as well]) and now using this for my weather card - specifically the next 12 hours using the bar-card at the bottom of this image:

The rain chance / amt bar-card below the temp is conditional upon the amt in next 12 > 0, so hides itself when no rain forecast.

The top portion is based on this: Weather Card | Old + New = Better? - #4 by Markus99

2 Likes

Ooh, daddy like! Care to share the YAML? It could use some stack-in card for good measure. Are there any that work these days? My canary card stopped working.

Sure thing. I haven’t put in a package, but this is the jist of it.

Sensors. Created two sensors for each period (mine are hours). Sensor 1 is the temperature (I cheat a bit and manipulated the time to shorten the time to 11a, 12p, 1p, etc… and set this as the friendly_name, value is the temp and icon uses default mdi icons and an array):

    weatherflow_forecast_0:
      friendly_name: >-
        {% set time =  state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.datetime | as_datetime | as_local | default(0,true) %}
        {{ time | as_timestamp | timestamp_custom('%-I%p') | replace('M','') | lower }}
#      unit_of_measurement: °
      value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.temperature }}"
      icon_template: >
        {% set array = { 'clear-night':'night',
                          'cloudy':'cloudy',
                          'exceptional':'sunny',
                          'fog':'fog',
                          'hail':'hail',
                          'lightning':'lightning',
                          'lightning-rainy':'lightning-rainy',
                          'partlycloudy':'partly-cloudy',
                          'rainy':'rainy',
                          'snowy':'snowy',
                          'snowy-rainy':'snowy-rainy',
                          'sunny':'sunny',
                          'windy':'windy' } %}
        {% set icon = array[state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.condition] %}
        mdi:weather-{{ icon }}

The second sensor is for the same period, but covers precipitation. Same thing, cheat the name as the precipt amt expected and the value as the probability of rain). FWIW, still playing around to try to get it to display w/out the leading 0 in name/amt [best guess is bar-card doing something funky {could be user error though…}]:

    weatherflow_forecast_precip_0:
      friendly_name: >-
        {% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation | float(0) %}
        {% set amt = (amt * 100) | int(0) %}
        {% if amt > 0 %}
          {% if amt < 100 %}.{{amt}}
          {% else %}{{ amt / 100 }}
          {% endif %}
        {% else %}.
        {% endif %}
      value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation_probability }}"

I have 12 of each of the above, incrementing the trailing _# for each period (clearly updating the .#. in the template to get the right forecast period).

Last sensor is a binary_sensor to check if it’s going to rain in the next 12 hours (my # of periods [used to hide the rain sectino):

    weatherflow_forecast_precip_total:
      friendly_name: Weather Forecast Precip Next 12
      value_template: >
        {{ (state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').1.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').3.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').5.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').7.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').9.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').11.precipitation | float(0) +
           state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.precipitation | float(0) ) > 0 }}   

Current .YAML for the UI-LOVELACE:

## BAR CARD FUTURE WEATHER ##
        - type: custom:bar-card
          style: |
            ha-card {
              margin-top: 10px;
              margin-bottom: -10px;
              padding-top: 10px;
              border-top: 5px solid #222222;
            }
            bar-card-card {
              margin-right: 0px;
              font-size: 11px;
            }
            bar-card-value {
              color: #222222;
              color: #9da5b4;
            }
            bar-card-iconbar {
              width: 20px;
              color: #333;
              margin-top: 65px;
            }
            bar-card-name {
              margin: 4px 0;
              color: #9da5b4;
              color: #dadadb;
            }
            .value-direction-up {
              #color: #dadadb;
              margin-top: -125px;
            }
            bar-card-backgroundbar {
              filter: brightness(.45);
            }
          positions:
            indicator: off
            value: inside
            title: off
            name: outside
            icon: inside
          animation:
            state: on
          direction: up
          height: 100px
          width: 22px
          columns: 12
          stack: horizontal
          min: 20
          max: 110
          entities:
            - sensor.weatherflow_forecast_0
            - sensor.weatherflow_forecast_1
            - sensor.weatherflow_forecast_2
            - sensor.weatherflow_forecast_3
            - sensor.weatherflow_forecast_4
            - sensor.weatherflow_forecast_5
            - sensor.weatherflow_forecast_6
            - sensor.weatherflow_forecast_7
            - sensor.weatherflow_forecast_8
            - sensor.weatherflow_forecast_9
            - sensor.weatherflow_forecast_10
            - sensor.weatherflow_forecast_11
          severity:
          - color: rgb(242,249,255)
            from: -20
            to: 2
          - color: rgb(228,242,254)
            from: 2
            to: 4
          - color: rgb(215,236,254)
            from: 4
            to: 6
          - color: rgb(201,229,253)
            from: 6
            to: 8
          - color: rgb(187,223,253)
            from: 8
            to: 10
          - color: rgb(173,216,252)
            from: 10
            to: 12
          - color: rgb(159,210,252)
            from: 12
            to: 14
          - color: rgb(145,203,251)
            from: 14
            to: 16
          - color: rgb(131,197,250)
            from: 16
            to: 18
          - color: rgb(117,190,249)
            from: 18
            to: 20
          - color: rgb(103,184,248)
            from: 20
            to: 22
          - color: rgb(89,177,247)
            from: 22
            to: 24
          - color: rgb(75,171,246)
            from: 24
            to: 26
          - color: rgb(61,164,245)
            from: 26
            to: 28
          - color: rgb(47,157,244)
            from: 28
            to: 30
          - color: rgb(33150243)
            from: 30
            to: 32
          - color: rgb(44,153,234)
            from: 32
            to: 34
          - color: rgb(55,157,224)
            from: 34
            to: 36
          - color: rgb(66,160,215)
            from: 36
            to: 38
          - color: rgb(77,164,205)
            from: 38
            to: 40
          - color: rgb(88,167,196)
            from: 40
            to: 42
          - color: rgb(99,171,186)
            from: 42
            to: 44
          - color: rgb(110,174,177)
            from: 44
            to: 46
          - color: rgb(121,178,168)
            from: 46
            to: 48
          - color: rgb(132,181,159)
            from: 48
            to: 50
          - color: rgb(143,185,150)
            from: 50
            to: 52
          - color: rgb(154,188,141)
            from: 52
            to: 54
          - color: rgb(165,192,132)
            from: 54
            to: 56
          - color: rgb(176,195,123)
            from: 56
            to: 58
          - color: rgb(187,199,114)
            from: 58
            to: 60
          - color: rgb(198,202,105)
            from: 60
            to: 62
          - color: rgb(209,205,96)
            from: 62
            to: 64
          - color: rgb(220,208,87)
            from: 64
            to: 66
          - color: rgb(231,211,78)
            from: 66
            to: 68
          - color: rgb(242,214,69)
            from: 68
            to: 70
          - color: rgb(253,217,60)
            from: 70
            to: 72
          - color: rgb(247,206,58)
            from: 72
            to: 74
          - color: rgb(240,194,55)
            from: 74
            to: 76
          - color: rgb(234,183,53)
            from: 76
            to: 78
          - color: rgb(227,171,50)
            from: 78
            to: 80
          - color: rgb(221,160,48)
            from: 80
            to: 82
          - color: rgb(214,148,45)
            from: 82
            to: 84
          - color: rgb(208,137,43)
            from: 84
            to: 86
          - color: rgb(201,125,40)
            from: 86
            to: 88
          - color: rgb(195,114,38)
            from: 88
            to: 90
          - color: rgb(188,102,35)
            from: 90
            to: 92
          - color: rgb(182,91,33)
            from: 92
            to: 94
          - color: rgb(175,79,30)
            from: 94
            to: 96
          - color: rgb(169,68,28)
            from: 96
            to: 98
          - color: rgb(162,56,25)
            from: 98
            to: 100
          - color: rgb(155,45,23)
            from: 100
            to: 102
          - color: rgb(148,33,20)
            from: 102
            to: 104
          - color: rgb(141,22,18)
            from: 104
            to: 106
          - color: rgb(134,11,15)
            from: 106
            to: 108
          - color: rgb(127,0,12)
            from: 108
            to: 120

# BAR CARD FUTURE HOURLY PRECIPITATION

        - type: conditional
          conditions:
          - entity: binary_sensor.weatherflow_forecast_precip_total
            state: 'on'
          card:
            type: custom:bar-card
            style: |
              ha-card {
                margin-top: -15px;
                margin-bottom: -15px;
                padding-top: 0px;
              }
              bar-card-card {
                margin-right: 0px;
                font-size: 11px;
              }
              bar-card-value {
                color: #222222;
              }
              bar-card-iconbar {
                width: 20px;
                color: #333;
                margin-top: 85px;
              }
              bar-card-name {
                margin: 4px 0;
                color: #9da5b4;
              }
              .value-direction-up {
                color: #dadadb;
                margin-top: -120px;
              }
              bar-card-backgroundbar {
                filter: brightness(.65);
              }
            positions:
              indicator: off
              value: off
              title: off
              name: outside
              icon: inside
            animation:
              state: on
            direction: up
            height: 25px
            width: 22px
            columns: 12
            stack: horizontal
            min: 20
            max: 110
            entities:
              - sensor.weatherflow_forecast_precip_0
              - sensor.weatherflow_forecast_precip_1
              - sensor.weatherflow_forecast_precip_2
              - sensor.weatherflow_forecast_precip_3
              - sensor.weatherflow_forecast_precip_4
              - sensor.weatherflow_forecast_precip_5
              - sensor.weatherflow_forecast_precip_6
              - sensor.weatherflow_forecast_precip_7
              - sensor.weatherflow_forecast_precip_8
              - sensor.weatherflow_forecast_precip_9
              - sensor.weatherflow_forecast_precip_10
              - sensor.weatherflow_forecast_precip_11

The severity is how I’m current color coding the bars - but can be updated fairly simply. Also using card-mod quite heavily to move around the text / icons and such.

Hope this helps, still a work in progress (of course!)

1 Like

Love you man. I like this better than weather card chart and will definitely rip it off top to bottom. Looks like it was a lot of work, well done! Nice that you are also a weatherflow user, I may be able to just copy paste the whole thing :slight_smile:

1 Like

I get this:

Any idea why I’m not getting the temperature graphs and what those little missing eye icons on the bottom might be?

Hmmm… Maybe I should have icon: off for the precipitation section - guessing that’s what those eyeballs are? I have a card below, so only guessing that one hides these shouldn’t-be-there icons.

1 Like

Thanks, it’s starting to look pretty good!I switched around a few things in small ways, but same general idea.

Is there any chance I could get your config for the 2 top cards too? I’m going to do exactly like you, it looks great and shows everything I want to see.

Actually having pretty good luck replacing that section with platinum weather card, and will be much easier to transition with dark sky goes kaput. Loving the results! Thanks for the inspiration