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.jsThen you can add the card to the view:
# Example Lovelace UI config entry
type: custom:weather-chart-card
entity: weather.homeConfiguration 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_hourlyChart 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