Weather Forecast Card

A custom weather card for Home Assistant that displays current weather and forecast in a scrollable horizontal list or chart.

[!NOTE] This card is under active development and primarily built for my personal use cases but if you find it useful, feel free to use and share feedback!

Why this card

While rebuilding my Home Assistant dashboard, I wanted a weather card with features from several existing custom cards as there wasn't a single card available that would satisfy my requirements. This led me to create this custom card, bringing together the best aspects of popular weather cards plus extras like horizontal scrolling and tap‑to‑toggle between hourly and daily forecasts.

This card takes inspiration from Weather Forecast Extended Card, Weather Chart Card, and the built-in Home Assistant Weather Forecast Card.

Key features:

• Scrollable forecast – Visualize more forecast data in a scrollable layout
• Toggle views – Switch between hourly and daily forecasts with a tap
• Visualize precipitation – See precipitation amounts for each forecast entry
• Chart mode – Visualize forecast trend charts with interactive attribute selector
• Extra attributes – Display extra attributes, like wind direction, wind bearing, or precipitation probability
• Group hourly data - Aggregate multiple hours of forecast data for easier viewing
• Custom icons – Use your own weather icons
• Customizable actions – Configure tap, hold, and double-tap behaviors
• Sun times - Visualize sunrise and sunset
• Condition effects - Add a special touch with animated weather effects
• Card editor - Configure the card directly in the UI. No YAML required

Installation

HACS (recommended)

The card is available in HACS (Home Assistant Community Store). Use the following link to directly go to the repository in HACS:

Or manually:

1. Open Home Assistant
2. Go to Settings → Devices & Services → HACS
3. Search for "Weather Forecast Card"
4. Click "Download"

You can now add the card to your dashboard by clicking "Edit dashboard" from the top right corner. You may need to clear your browser cache.

Manual Installation

1. Download the latest weather-forecast-card.js from the releases page
2. Copy it to your config/www folder
3. Add the resource to your Lovelace configuration:

resources:
  - url: /local/weather-forecast-card.js
    type: module

4. Restart Home Assistant

Configuration

Current Object

The current object controls the display of current weather information and attributes.

Available attributes:

• humidity - Relative humidity percentage
• pressure - Atmospheric pressure
• wind_speed - Wind speed with direction (if available)
• wind_gust_speed - Wind gust speed
• visibility - Visibility distance
• ozone - Ozone level
• uv_index - UV index
• dew_point - Dew point temperature
• apparent_temperature - Feels like temperature
• cloud_coverage - Cloud coverage percentage

[!NOTE] Attributes are only rendered if the data is available from your weather entity (or custom sensor entity if configured). If an attribute is not provided by your weather integration, it will not be displayed even if configured.

Custom Attribute Entities

Similar to the current.temperature_entity option, you can override individual attribute values with custom sensor entities. This is useful when your weather integration doesn't provide certain attributes or when you have more accurate local sensors.

Object format for attributes:

Configuration examples:

# Simple array of attribute names (uses weather entity values)
current:
  show_attributes:
    - humidity
    - pressure
    - wind_speed

# Object format with custom entities
current:
  show_attributes:
    - name: humidity
      entity: sensor.outdoor_humidity
    - name: pressure
      entity: sensor.barometer
    - name: wind_speed # No entity specified, uses weather entity

# Mixed format (strings and objects)
current:
  show_attributes:
    - humidity # Uses weather entity
    - name: pressure
      entity: sensor.custom_pressure
    - wind_speed # Uses weather entity

[!TIP] The card editor provides entity selectors with appropriate device class filtering when you select attributes. Expand the "Attribute entities" section to configure custom sensors for each selected attribute.

Forecast Object

[!IMPORTANT] Canvas width limit: To ensure cross-browser compatibility and prevent rendering issues, the canvas width is capped at 16384 pixels in chart mode. At a standard item width of 50px, this supports approximately 320 entries (roughly two weeks of data) which is more than enough to cover reliable weather data from most forecast services. Any data exceeding this limit will be truncated.

Forecast Actions

Actions support standard Home Assistant card actions. However, two additional actions have been defined:

• toggle-forecast - Toggles the forecast between daily and hourly views
• select-forecast-attribute - Opens the attribute selector dropdown in chart mode (default hold action)

Forecast actions have the following options

Chart Attribute Selector

When using chart mode (mode: chart), an interactive attribute selector allows switching between different weather data visualizations.

Available chart attributes:

• temperature_and_precipitation - Default dataset visualizing temperature curves (high/low) and precipitation bars
• apparent_temperature - Visualizes apparent temperature as line graph
• humidity - Visualizes relative humidity as a line graph
• pressure - Visualizes atmospheric pressure as line graph
• uv_index - Visualizes UV index as a bar graph. Decimal values are rounded to integers as per WHO international standards for public health reporting, ensuring clear risk-category communication.

[!NOTE] Attributes are only shown in the selector if the data is available from your weather entity. If an attribute is not provided by your weather integration, it will not appear in the dropdown.

[!NOTE] Currently, only chart mode supports selecting the weather attribute.

Usage:

The attribute selector can be accessed via:

• Hold action (default): Press and hold on the chart area to open the attribute dropdown. This works by default without any additional configuration.
• Settings icon: Set show_attribute_selector: true to display a settings icon in the top-right corner of the chart for quick access.

Example configuration with settings icon:

type: custom:weather-forecast-card
entity: weather.home
forecast:
  mode: chart
  show_attribute_selector: true

Example

type: custom:weather-forecast-card
entity: weather.home
current:
  show_attributes:
    - humidity
    - pressure
    - wind_speed
forecast:
  mode: chart
  extra_attribute: wind_direction

Weather Condition Effects

The card supports animated visual effects that respond to current weather conditions, adding an immersive layer to your weather display. These effects are rendered as background animations behind the card content.

[!WARNING] Performance Note: Weather animations utilize CSS processing, which can increase CPU usage. On low-powered devices, or when displaying multiple cards simultaneously, this may cause UI sluggishness. If performance drops, consider disabling animations or selecting only the most essential effects.

Configuration

Enable weather effects using the show_condition_effects option:

Enable all effects:

type: custom:weather-forecast-card
entity: weather.home
show_condition_effects: true

Enable specific effects only:

type: custom:weather-forecast-card
entity: weather.home
show_condition_effects:
  - rain
  - snow
  - lightning

Disable all effects (default):

type: custom:weather-forecast-card
entity: weather.home
show_condition_effects: false

Available Effects

The card provides six different effect types that can be individually enabled or disabled:

Custom Icons

You can use your own custom weather icons by specifying the icons_path configuration option.

Setup

1. Place your custom weather icon files in a directory accessible to Home Assistant (e.g., /local/img/weather-icons/)
2. Name your icons to match the weather conditions (see Icon Naming below)
3. Set the icons_path in your card configuration

Icon Naming

Icons should be named after the weather condition states used by Home Assistant. Note that if suntimes are enabled (with config forecast.show_sun_times), few extra condition icons need to be defined in addition to the standard Home Assistant weather conditions. Icon mappings is as follows:

[!NOTE] Only SVG format is currently supported.

Example configuration with custom icons:

type: custom:weather-forecast-card
entity: weather.home
icons_path: /local/img/weather-icons

This will load icons from /local/img/weather-icons/sunny.svg, /local/img/weather-icons/rainy.svg, etc.

Styling

The card can be customized using Home Assistant theme variables. Most colors, sizes, and visual elements can be overridden by defining CSS variables in your theme configuration.

Theme Variables

Add these variables to your Home Assistant theme to customize the card's appearance:

[!NOTE] Chart attribute colors: When visualizing UV index with chart mode, the bar groupings follow the Global Solar UV Index (UVI) risk categories (0–2, 3–5, 6–7, 8–10, 11+). The default bar colors are theme-configurable values (see the table above) and are not an official WHO color standard.

Weather Effects Variables

Customize the appearance of animated weather effects when show_condition_effects is enabled:

[!NOTE] Weather effects variables support both light and dark themes. Colors automatically adjust based on your theme's dark mode setting, with separate default values optimized for each mode.

Example Theme Configuration

Add any of the variables to your themes to customize the card:

my-custom-theme:
  # Weather Forecast Card customization
  weather-forecast-card-chart-temp-high-line-color: "#ff5722"

  # Chart visualization colors
  weather-forecast-card-chart-humidity-line-color: "#1976d2"
  weather-forecast-card-chart-pressure-line-color: "#0097a7"
  weather-forecast-card-uv-low-color: "#00ff00"

  # Weather Forecast Card effects customization
  weather-forecast-card-effects-sun-color: "#fbbf24"

[!NOTE] These variables are applied through Home Assistant's theme system. Make sure to reload your theme after making changes.

Adjusting Font Sizes

The card uses Home Assistant's font size variables. You can customize these via your theme or using card-mod.

Available font size variables:

Theme example:

my-custom-theme:
  # Adjust font sizes globally for all cards
  ha-font-size-3xl: 32px
  ha-font-size-l: 18px

Card-mod example:

Configure font size for all elements:

type: custom:weather-forecast-card
entity: weather.home
card_mod:
  style: |
    ha-card {
      /* Larger current conditions and temperature */
      --ha-font-size-3xl: 38px;
      --ha-font-size-xl: 30px;
      /* Larger forecast temperatures (simple mode) */
      --ha-font-size-m: 16px;
      /* Make simple forecast items wider to avoid text overflow */
      --forecast-item-width: 75px;
    }

Or if you want more granular control:

type: custom:weather-forecast-card
entity: weather.home
card_mod:
  style: |
    ha-card {
      /* Make simple forecast items wider to avoid text overflow */
      --forecast-item-width: 70px;
    }
    /* Affects only font sizes in the current weather section */
    .wfc-current-weather {
      /* Larger current conditions and temperature */
      --ha-font-size-3xl: 38px;
      --ha-font-size-xl: 30px;
    }
    /* Affects only forecast section */
    .wfc-forecast {
      /* Forecast header and temperatures font (simple mode) */
      --ha-font-size-m: 20px;
    }

[!NOTE] Chart labels use a dedicated variable weather-forecast-card-chart-font-size (default 12px) which can be set via themes. See the Theme Variables table above.

License

This repo is MIT Licensed