Weather Chart Card

Fork Notice

The upstream repository is no longer maintained, so this is a fork with the following features implemented:

• Custom Chart Height - Adjust the height of the forecast chart to fit your dashboard layout
• Use Feels Like Temperature for Forecast - Display apparent temperature in the forecast chart instead of standard temperature range
• Wind Gust Display in Forecast - Show wind gust speed alongside wind speed with automatic unit conversion
• Hide Wind Units in Forecast - Option to remove unit labels from wind displays for a cleaner appearance
• Vertical Wind Layout in Forecast - Display wind information stacked vertically instead of horizontally

See the Fork-Specific Features section below for detailed documentation and configuration examples.

Installation

HACS

This card is available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box.

Configuration variables:

Card options

Name	Type	Default	Description
type	string	Required	Should be custom:weather-chart-card.
entity	string	Required	An entity_id with the weather domain.
temp	string	none	An entity_id for a custom temperature sensor.
press	string	none	An entity_id for a custom pressure sensor.
humid	string	none	An entity_id for a custom humidity sensor.
uv	string	none	An entity_id for a custom UV index sensor.
winddir	string	none	An entity_id for a custom wind bearing sensor. Sensor should have value in degrees
windspeed	string	none	An entity_id for a custom wind speed sensor.
feels_like	string	none	An entity_id for a custom feels like temperature sensor.
dew_point	string	none	An entity_id for a custom dew point sensor.
wind_gust_speed	string	none	An entity_id for a custom wind gust speed sensor.
visibility	string	none	An entity_id for a custom visibility sensor.
description	string	none	An entity_id for a custom weather description sensor.
title	string	none	Card title.
show_main	boolean	true	Show or hide a section with current weather condition and temperature.
show_temperature	boolean	true	Show or hide the current temperature.
show_current_condition	boolean	true	Show or hide the current weather condition.
show_attributes	boolean	true	Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc.
show_sun	boolean	true	Show or hide the sunset information
show_time	boolean	false	Show or hide the current time on the card.
show_time_seconds	boolean	false	Show or hide seconds for the current time on the card.
show_day	boolean	false	Show or hide the current day on the card. (Only visible when show_time is true.)
show_date	boolean	false	Show or hide the current date the card. (Only visible when show_time is true.)
show_humidity	boolean	true	Show or hide humidity on the card.
show_pressure	boolean	true	Show or hide pressure on the card.
show_wind_direction	boolean	true	Show or hide wind_direction on the card.
show_wind_speed	boolean	true	Show or hide wind_speed on the card.
show_feels_like	boolean	false	Show or hide feels like temperature on the card.
show_dew_point	boolean	false	Show or hide dew point on the card.
show_wind_gust_speed	boolean	false	Show or hide wind gust speed on the card.
show_visibility	boolean	false	Show or hide visibility on the card.
show_description	boolean	false	Show or hide the weather description on the card.
show_last_changed	boolean	false	Show or hide when last data changed on the card.
use_12hour_format	boolean	false	Display time in 12-hour format (AM/PM) instead of 24-hour format.
icons	string	none	Path to the location of custom icons in svg format, for example /local/weather-icons/.
animated_icons	boolean	false	Enable the use of animated icons
icon_style	string	'style1'	Options are 'style1' and'style2' for different set of animated icons.
icons_size	number	25	The size of the animated or custom icons in pixels.
current_temp_size	number	28	The size of the current temperature in pixels.
time_size	number	26	The size of the current time in pixels.
day_date_size	number	15	The size of the current day and date in pixels.
forecast	object	none	See forecast options for available options.
units	object	none	See units of measurement for available options.
locale	string	none	See Supported languages for available languages
autoscroll	boolean	false	Update the chart each hour, hiding prior forecast datapoints

Forecast options

Name	Type	Default	Description
precipitation_type	string	rainfall	Show precipitation in 'rainfall' or 'probability'.
show_probability	boolean	false	Also show probability value when precipitation_type = rainfall. (Only when available)
labels_font_size	number	11	Font size for temperature and precipitation labels.
precip_bar_size	number	100	Adjusts the thickness of precipitation bars (1-100).
temperature1_color	string	rgba(255, 152, 0, 1.0)	Temperature first line chart color.
temperature2_color	string	rgba(68, 115, 158, 1.0)	Temperature second line chart color.
precipitation_color	string	rgba(132, 209, 253, 1.0)	Precipitation bar chart color.
chart_datetime_color	string	primary-text-color	Chart day or hour color
chart_text_color	string	none	Chart text color
chart_height	number	180	Adjust the forecast chart height
condition_icons	boolean	true	Show or hide forecast condition icons.
show_wind_forecast	boolean	true	Show or hide wind forecast on the card.
round_temp	boolean	false	Option for rounding the forecast temperatures
style	string	style1	Change chart style, options: 'style1' or 'style2'
type	string	daily	Show daily or hourly forecast if available, options: 'daily' or 'hourly'
number_of_forecasts	number	0	Overrides the number of forecasts to display. Set to "0" for automatic mode.
disable_animation	boolean	false	Disable the chart animation.

Units of measurement

Name	Type	Default	Description
pressure	string	none	Convert to 'hPa' or 'mmHg' or 'inHg'
speed	string	none	Convert to 'km/h' or 'm/s' or 'Bft' or 'mph'

What custom icons can I use?

Icons should be in svg format. Icons should have names as shown here. Example:

Example usage:

Card with current time, date and day

type: custom:weather-chart-card
entity: weather.weather_home
show_time: true
show_day: true
show_date: true
animated_icons: true
icon_style: style1

Style2 chart

type: custom:weather-chart-card
entity: weather.my_home
forecast:
  style: style2

Chart only

type: custom:weather-chart-card
entity: weather.my_home
show_main: false
show_attributes: false
forecast:
  condition_icons: false
  show_wind_forecast: false

Custom units

type: custom:weather-chart-card
entity: weather.my_home
units:
  pressure: mmHg
  speed: m/s

Supported languages:

Language	Locale
Bulgarian	bg
Catalan	ca
Czech	cs
Danish	da
Dutch	nl
English	en
Finnish	fi
French	fr
German	de
Greek	el
Hungarian	hu
Italian	it
Lithuanian	lt
Norwegian	no
Polish	pl
Portuguese	pt
Romanian	ro
Russian	ru
Slovak	sk
Spanish	es
Swedish	sv
Ukrainian	uk
한국어	ko

Fork-Specific Features

This fork includes additional forecast features not available in the upstream repository:

Custom Chart Height

Adjust the height of the forecast chart to better fit your dashboard layout. This is particularly useful when you want to make the chart more compact or give it more vertical space.

Configuration:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  chart_height: 250  # Height in pixels (default: 180)

Note: The chart height is specified in pixels. The default value is 180 pixels. You can adjust this value to make the chart taller (larger values) or shorter (smaller values) based on your dashboard needs.

Use Feels Like Temperature for Forecast

Display "feels like" (apparent) temperature in the forecast chart instead of the standard temperature range. When enabled, the chart will use the apparent_temperature field from the forecast data.

Configuration:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  use_apparent_temperature: true

Note: This feature requires that your weather entity provides apparent_temperature in the forecast data. When enabled, only a single temperature line will be shown (no high/low range).

Wind Gust Display in Forecast

Show wind gust speed alongside wind speed in the forecast. Wind gust values are automatically converted to match your configured wind speed unit.

Configuration:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  show_wind_forecast: true

Wind gust will automatically appear if available in your forecast data. It uses the same unit conversion settings as wind speed.

Hide Wind Units in Forecast

Remove unit labels from wind speed and gust displays in the forecast for a cleaner, more compact appearance.

Configuration:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  show_wind_forecast: true
  hide_wind_units: true

Vertical Wind Layout in Forecast

Display wind direction, speed, and gust stacked vertically instead of horizontally for better readability, especially on smaller screens.

Configuration:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  show_wind_forecast: true
  wind_vertical_layout: true

Combined Example:

type: custom:weather-chart-card
entity: weather.weather_home
forecast:
  chart_height: 250
  use_apparent_temperature: true
  show_wind_forecast: true
  hide_wind_units: true
  wind_vertical_layout: true