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
weather: weather.home| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | Should be custom:weather-chart-card |
| weather | string | Required | An entity_id with the weather domain |
| title | string | none | Card title |
| temp | string | none | Entity_id of the temperature sensor. Show temperature value from sensor instead |
| 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 |
| 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 |
Icons should be in svg format. Icons should have names as shown here. Example:
type: custom:weather-chart-card
weather: weather.home_hourly
type: custom:weather-chart-card
weather: weather.openweathermap
show_main: false
show_attributes: false
icons: /local/weather-icons/
