Weather Chart Card

A maintained fork of mlamberts78/weather-chart-card, thank you for all your work in building this. The original author has stopped maintaining. Original work by Marc Lamberts, MIT licensed.

What's different in this fork

Home Assistant removed the Material Web Components the original card's editor was built on, which broke most of the visual editor. This fork rebuilds it on native HTML controls styled with HA CSS variables, so it doesn't depend on HA frontend internals.

• Every editor control works again — text fields, radio buttons, dropdowns, and page tabs
• Wind gust speed now respects the unit conversion setting
• inHg pressure shows its unit label
• Ongoing: merging useful pull requests that were never merged upstream

See the releases for details.

Installation

HACS

This card is not in the HACS default store. Add it as a custom repository:

1. HACS → three-dot menu → Custom repositories
2. Repository: https://github.com/adam50hhh/weather-chart-card
3. Type: Dashboard
4. Click Add, then find "Weather Chart Card" and download it
5. Restart Home Assistant

Configuration

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 on 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, placed in a folder under /config/www/, and named exactly as below. Point the icons option at that folder, for example /local/weather-icons/.

• clear-day.svg
• clear-night.svg
• cloudy.svg
• exceptional.svg
• fog.svg
• hail.svg
• lightning.svg
• lightning-rain.svg
• partlycloudy-day.svg
• partlycloudy-night.svg
• pouring.svg
• rain.svg
• sleet.svg
• snow.svg
• wind.svg

These names come from weatherIconsDay and weatherIconsNight in src/const.js.

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