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.home| 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 |
| Name | Type | Default | Description |
|---|---|---|---|
| pressure | string | 'hPa' | Can be 'hPa' or 'mmHg' |
| speed | string | 'km/h' | Can be 'km/h' or 'm/s' |
Icons should be in svg format. Icons should have names as shown here. Example:
type: custom:weather-chart-card
entity: weather.home_hourly
type: custom:weather-chart-card
entity: weather.openweathermap
show_main: false
show_attributes: false
icons: /local/weather-icons/
type: custom:weather-chart-card
entity: weather.home_hourly
show_attributes: true
units:
pressure: mmHg
speed: km/h