Weather Forecast Card for Home Assistant

The Weather Forecast Card is a custom Home Assistant card designed to display current weather and forecasts using a scrollable horizontal list or interactive charts.

Key capabilities include:

• Scrollable forecast: View extensive forecast data in a horizontal layout.
• Toggle views: Tap to switch between hourly and daily forecast views.
• Precipitation visualization: View precipitation amounts per forecast entry.
• Chart mode: Interactive trend charts with an attribute selector.
• Customization: Support for custom icons, custom tap/hold/double-tap actions, and animated weather condition effects.
• Sun times: Visualization of sunrise and sunset.
• UI Configuration: Supports direct configuration via the Home Assistant UI card editor (no YAML required).

When forecast.mode is set to chart, users can switch between different data visualizations using the Attribute Selector.

Available Chart Attributes:

• temperature_and_precipitation: (Default) Temperature curves and precipitation bars.
• apparent_temperature: Line graph of apparent temperature.
• humidity: Line graph of relative humidity.
• pressure: Line graph of atmospheric pressure.
• uv_index: Bar graph of UV index.

How to access the selector:

1. Hold Action: Press and hold on the chart area (default behavior).
2. Settings Icon: Enable show_attribute_selector: true in the forecast configuration to display a settings icon in the top-right corner.

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

The card utilizes Home Assistant's standard font size variables. You can adjust these globally in your theme or use card-mod for card-specific overrides.

Standard Font Size Variables:

• --ha-font-size-3xl (28px): Current weather conditions and temperature.
• --ha-font-size-xl (20px): Secondary info icon, chart header, or smaller screen temperature.
• --ha-font-size-l (16px): Wind speed text.
• --ha-font-size-m (14px): Forecast labels, current weather attributes, and forecast primary time labels.
• --ha-font-size-s (12px): Forecast secondary time labels and simple forecast precipitation amounts.

Note: Chart labels use a specific variable weather-forecast-card-chart-font-size (default 12px).

# Global theme adjustment
my-custom-theme:
  ha-font-size-3xl: 32px
  ha-font-size-l: 18px

The recommended way to install this card is through the Home Assistant Community Store (HACS).

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

After installation, you can add the card to your dashboard via the dashboard editor. You may need to clear your browser cache for the new card to appear.

You can replace the default weather icons with your own custom SVG files by using the icons_path option.

Setup Steps

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 Home Assistant weather condition states (see Icon Naming below).
3. Set the icons_path in your card configuration.

Note: Only SVG format is currently supported.

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

If you are not using HACS, you can install the card manually:

1. Download the latest weather-forecast-card.js from the releases page.
2. Copy the file to your Home Assistant config/www folder.
3. Register the resource in your Lovelace configuration.
4. Restart Home Assistant.

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

The card supports animated visual effects rendered as background animations. You can enable all effects, specific effects, or disable them entirely using the show_condition_effects option.

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.

Configuration Options

• Enable all effects: Set show_condition_effects: true.
• Enable specific effects: Provide a list of effect names (e.g., rain, snow, lightning).
• Disable all effects: Set show_condition_effects: false (this is the default).

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

The card provides integration with Home Assistant's layout engine (Sections view and legacy masonry view) to ensure it snaps to appropriate grid rows and columns.

• Sections View: Uses getGridOptions() to report columns (fixed at 12), rows, min_rows, and min_columns based on which sections (show_current, show_forecast) are enabled.
• Legacy Masonry View: Uses getCardSize() to report a height in units of approximately 50px.

Sizing is calculated dynamically based on the configuration. For example, enabling show_current with show_attributes increases the estimated row count to prevent clipping.

You can display any Home Assistant entity's state as a weather attribute by using the show_attributes configuration.

To override a standard weather attribute (like humidity) with a specific sensor, or to display an arbitrary entity that isn't a standard weather attribute, use the object format within the show_attributes array. Each object can specify:

• name: The attribute name (e.g., humidity) or an arbitrary entity name.
• entity: The specific sensor entity to use.
• label: A custom display name.
• icon: A custom icon for the attribute.

Example of mixing standard attributes and custom entity overrides:

current:
  show_attributes:
    - humidity
    - wind_speed
    - name: "Custom Sensor"
      entity: sensor.my_custom_sensor
      label: "My Sensor"
      icon: mdi:thermometer

The chart component can display different weather attributes (e.g., UV index, humidity, pressure, or the default temperature and precipitation).

If config.forecast.show_attribute_selector is set to true, a settings toggle will appear on the chart. This allows users to switch the active chart attribute. The component uses CHART_ATTRIBUTES to determine available options based on the data present in the forecast array.