Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mlamberts78/weather-chart-card
Custom weather card with charts.
https://github.com/mlamberts78/weather-chart-card
card home-assistant weather
Last synced: 9 days ago
JSON representation
Custom weather card with charts.
- Host: GitHub
- URL: https://github.com/mlamberts78/weather-chart-card
- Owner: mlamberts78
- License: mit
- Created: 2023-07-12T10:47:35.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-22T11:48:50.000Z (3 months ago)
- Last Synced: 2024-08-22T14:16:59.783Z (3 months ago)
- Topics: card, home-assistant, weather
- Language: JavaScript
- Homepage:
- Size: 821 KB
- Stars: 264
- Watchers: 7
- Forks: 31
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Weather Chart Card
[](https://www.buymeacoffee.com/mlamberts7I)
[](https://www.paypal.com/donate/?hosted_button_id=HZUUW64FRM2J2)
[](https://github.com/hacs/integration)
[](https://github.com/mlamberts78/weather-chart-card/releases/latest)
[](https://github.com/mlamberts78/weather-chart-card/actions/workflows/validate.yaml)
## Installation
### HACS
This card is available in HACS (Home Assistant Community Store).
HACS is a third party community store and is not included in Home Assistant out of the box.
#### 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. |
| temp | string | none | An entity_id for a custom temperature sensor. |
| press | string | none | An entity_id for a custom pressure sensor. |
| humid | string | none | An entity_id for a custom humidity sensor. |
| uv | string | none | An entity_id for a custom UV index sensor. |
| winddir | string | none | An entity_id for a custom wind bearing sensor. Sensor should have value in degrees |
| windspeed | string | none | An entity_id for a custom wind speed sensor. |
| feels_like | string | none | An entity_id for a custom feels like temperature sensor. |
| dew_point | string | none | An entity_id for a custom dew point sensor. |
| wind_gust_speed | string | none | An entity_id for a custom wind gust speed sensor. |
| visibility | string | none | An entity_id for a custom visibility sensor. |
| description | string | none | An entity_id for a custom weather description sensor. |
| title | string | none | Card title. |
| show_main | boolean | true | Show or hide a section with current weather condition and temperature. |
| show_temperature | boolean | true | Show or hide the current temperature. |
| show_current_condition| boolean | true | Show or hide the current weather condition. |
| show_attributes | boolean | true | Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc. |
| show_sun | boolean | true | Show or hide the sunset information |
| show_time | boolean | false | Show or hide the current time on the card. |
| show_time_seconds | boolean | false | Show or hide seconds for the current time on the card. |
| show_day | boolean | false | Show or hide the current day on the card. (Only visible when show_time is true.) |
| show_date | boolean | false | Show or hide the current date the card. (Only visible when show_time is true.) |
| show_humidity | boolean | true | Show or hide humidity on the card. |
| show_pressure | boolean | true | Show or hide pressure on the card. |
| show_wind_direction | boolean | true | Show or hide wind_direction on the card. |
| show_wind_speed | boolean | true | Show or hide wind_speed on the card. |
| show_feels_like | boolean | false | Show or hide feels like temperature on the card. |
| show_dew_point | boolean | false | Show or hide dew point on the card. |
| show_wind_gust_speed | boolean | false | Show or hide wind gust speed on the card. |
| show_visibility | boolean | false | Show or hide visibility on the card. |
| show_description | boolean | false | Show or hide the weather description on the card. |
| show_last_changed | boolean | false | Show or hide when last data changed on the card. |
| use_12hour_format | boolean | false | Display time in 12-hour format (AM/PM) instead of 24-hour format. |
| icons | string | none | Path to the location of custom icons in svg format, for example `/local/weather-icons/`. |
| animated_icons | boolean | false | Enable the use of animated icons |
| icon_style | string | 'style1' | Options are 'style1' and'style2' for different set of animated icons. |
| icons_size | number | 25 | The size of the animated or custom icons in pixels. |
| current_temp_size | number | 28 | The size of the current temperature in pixels. |
| time_size | number | 26 | The size of the current time in pixels. |
| day_date_size | number | 15 | The size of the current day and date in pixels. |
| forecast | object | none | See [forecast options](#forecast-options) for available options. |
| units | object | none | See [units of measurement](#units-of-measurement) for available options. |
| locale | string | none | See [Supported languages](#Supported-languages) for available languages |
| autoscroll | boolean | false | Update the chart each hour, hiding prior forecast datapoints |
##### Forecast options
| Name | Type | Default | Description |
| -------------------- | ------- | -------------------------|--------------------------------------------------------------------------------------------------- |
| precipitation_type | string | rainfall | Show precipitation in 'rainfall' or 'probability'. |
| show_probability | boolean | false | Also show probability value when precipitation_type = rainfall. (Only when available) |
| labels_font_size | number | 11 | Font size for temperature and precipitation labels. |
| precip_bar_size | number | 100 | Adjusts the thickness of precipitation bars (1-100). |
| 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. |
| chart_datetime_color | string | primary-text-color | Chart day or hour color |
| chart_text_color | string | none | Chart text color |
| chart_height | number | 180 | Adjust the forecast chart height |
| condition_icons | boolean | true | Show or hide forecast condition icons. |
| show_wind_forecast | boolean | true | Show or hide wind forecast on the card. |
| round_temp | boolean | false | Option for rounding the forecast temperatures |
| style | string | style1 | Change chart style, options: 'style1' or 'style2' |
| type | string | daily | Show daily or hourly forecast if available, options: 'daily' or 'hourly' |
| number_of_forecasts | number | 0 | Overrides the number of forecasts to display. Set to "0" for automatic mode. |
| disable_animation | boolean | false | Disable the chart animation. |
##### Units of measurement
| Name | Type | Default | Description |
| -------------------- | ------- | -------------------------|--------------------------------------------------------------------------------------------------- |
| pressure | string | none | Convert to 'hPa' or 'mmHg' or 'inHg' |
| speed | string | none | Convert to 'km/h' or 'm/s' or 'Bft' or 'mph' |
###### What custom icons can I use?
Icons should be in svg format. Icons should have names as shown [here](https://github.com/mlamberts78/weather-chart-card/blob/master/src/const.js#L24). Example:
#### Example usage:
###### Card with current time, date and day
```yaml
type: custom:weather-chart-card
entity: weather.weather_home
show_time: true
show_day: true
show_date: true
animated_icons: true
icon_style: style1
```
###### Style2 chart
```yaml
type: custom:weather-chart-card
entity: weather.my_home
forecast:
style: style2
```
###### Chart only
```yaml
type: custom:weather-chart-card
entity: weather.my_home
show_main: false
show_attributes: false
forecast:
condition_icons: false
show_wind_forecast: false
```
###### Custom units
```yaml
type: custom:weather-chart-card
entity: weather.my_home
units:
pressure: mmHg
speed: m/s
```
###### Supported languages:
| Language | Locale |
| ---------------- | ------- |
| Bulgarian | bg |
| Catalan | ca |
| Czech | cs |
| Danish | da |
| Dutch | nl |
| English | en |
| Finnish | fi |
| French | fr |
| German | de |
| Greek | el |
| Hungarian | hu |
| Italian | it |
| Lithuanian | lt |
| Norwegian | no |
| Polish | pl |
| Portuguese | pt |
| Romanian | ro |
| Russian | ru |
| Slovak | sk |
| Spanish | es |
| Swedish | sv |
| Ukrainian | uk |
| 한국어 | ko |