/weather-with-graph

A custom weather card with charts.

Primary LanguageJavaScriptMIT LicenseMIT

Weather card

Example from Stockholm/Sweden

About

This repository was initially a fork of a nice weather card that I wanted to tweak and adapt quite a lot. For various reasons I've turned this into its own project, but please do visit the original to see if it better suits your needs.

Installation

HACS - preferred method

If you don't know about HACS (Home Assistant Community Store), you should check it out. It is by far the best current method of finding, installing and maintaining plugins. Presently this repository is not in HACS (I do plan to add it when I have time), but you can add this repository manually.

  1. In HASS, navigate to Community -> Settings.
  2. Add this repository to the custom repositories, as a plugin.
  3. Navigate to Community -> Store.
  4. Find the weather with graph card in the plugins section. Install.
  5. In Lovelace UI config:
 - url: /local/weather-with-graph.js
   type: module

Manual

  1. Copy dist/weather-with-graph.js into HASS config/www folder.
  2. In Lovelace UI config:
 - url: /local/weather-with-graph.js
   type: module

Configuring the card

Minimal card settings
 - type: 'custom:weather-with-graph'
   weather: weather.openweathermap

Separate temperature etc

This card will display temperature not from the weather entity but from a separate temperature sensor.

 - type: 'custom:weather-with-graph'
   weather: weather.openweathermap
   temp: sensor.frontdoor_temperature
   number_of_forecasts: 5

Configuration variables

Name Optional Description
type No Should be 'custom:weather-with-graph'.
weather No An entity_id with the weather domain.
title Yes Card title, defaults to friendly_name if no title is set.
temp Yes Entity_id of the temperature sensor. Show temperature value from sensor instead.
mode Yes Default value: daily. Set mode to hourly to display hours instead weekdays on the chart.
number_of_forecasts Yes Number of forecast recordings to show, min 3 max 9.
chart_only Yes Display the chart without displaying the header information. Boolean.