/weather-chart-card

Custom weather card with charts

Primary LanguageJavaScriptMIT LicenseMIT

image

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:

Open your Home Assistant instance and show your Lovelace resources.

# 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: image

Example usage:

Basic

130359790-e2a7bceb-29d5-494e-9f6e-d679a3e41222

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

image

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

image

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