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 amd 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
units	object	none	See units of measurement for available options
temp1_color	string	rgba(230, 100, 100, 1.0)	Temperature first line chart color
temp2_color	string	rgba(68, 115, 158, 1.0)	Temperature second line chart color
precip_color	string	rgba(132, 209, 253, 1.0)	Precipitation bar chart color

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