Configuration

Download and copy weather-chart-card.js from the latest release into your config/www directory.

Add a reference to the copied file inside your configuration.yaml or in the Home Assistant UI:

# Example Lovelace UI config entry
resources:
- type: module
  url: /local/weather-chart-card.js

Then you can add the card to the view:

# Example Lovelace UI config entry
type: custom:weather-chart-card
entity: weather.home

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.
title	string	none	Card title.
show_main	boolean	true	Show or hide a section with current weather condition and temperature.
show_attributes	boolean	true	Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc.
icons	string	none	Path to the location of custom icons in svg format, for example /local/weather-icons/.
icons_size	number	25	The size of custom icons in pixels.
forecast	object	none	See forecast options for available options.
units	object	none	See units of measurement for available options.

Forecast options

Name	Type	Default	Description
labels_font_size	string	11	Font size for temperature and precipitation labels.
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.
condition_icons	boolean	true	Show or hide forecast condition icons.

Units of measurement

Name	Type	Default	Description
pressure	string	'hPa'	Can be 'hPa' or 'mmHg'
speed	string	'km/h'	Can be 'km/h' or 'm/s'

What custom icons can I use?

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

Example usage:

Basic

type: custom:weather-chart-card
entity: weather.home_hourly

Chart only

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

Custom units

type: custom:weather-chart-card
entity: weather.home_hourly
show_attributes: true
units:
  pressure: mmHg
  speed: km/h