weather-chart-card
Custom weather card with charts.
JavaScript★ 437⑂ 93 forksMITupdated 6 months ago
git clone https://github.com/mlamberts78/weather-chart-card.gitmlamberts78/weather-chart-cardREADME.mdfork it — it’s yours
Weather Chart Card
No Longer Maintained
This repository is no longer maintained. Feel free to fork it if you find it useful.
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 for available options. |
| units | object | none | See units of measurement for available options. |
| locale | string | none | See 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. Example:

Example usage:
Card with current time, date and day
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
type: custom:weather-chart-card entity: weather.my_home forecast: style: style2
Chart only
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
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 |
more like this
eeweather
Fetch NCDC ISD, TMY3, or CZ2010 weather data that corresponds to ZIP Code Tabulation Areas or Latitude/Longitude.
HTML★ 51
todo-swipe-card
A specialized swipe card for todo lists in Home Assistant with custom styling
JavaScript★ 53



