Lovelace Mini Graph Card

A minimalistic sensor with graph lovelace card for Home Assistant.

The card works with entities from within the sensor domain and displays the sensors current state as well as a line graph of the sensor state during the past 24 hours (accuracy may vary).

Install

Simple install

Copy mini-graph-card.js and mini-graph-lib.js into your config/www folder.
Add a reference to the mini-graph-card.js inside your ui-lovelace.yaml.

resources:
  - url: /local/mini-graph-card.js?v=0.0.7
    type: module

Install using git

Clone this repository into your config/www folder using git.

git clone https://github.com/kalkih/mini-graph-card.git

Add a reference to the card in your ui-lovelace.yaml.

resources:
  - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.7
    type: module

(Optional) Add to custom updater

Make sure you got the custom_updater component installed.
Add a reference under card_urls in your custom_updater configuration in configuration.yaml.

custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/kalkih/mini-graph-card/master/tracker.json

Updating

Find your mini-graph-card.js & mini-graph-lib.js files in config/www or wherever you ended up storing them.
Replace the files with the latest versions of mini-graph-card.js. mini-graph-lib.js.
Add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below.

resources:
  - url: /local/mini-graph-card.js?v=0.0.7
    type: module

If you went the git clone route, just run git pull from inside your config/www/mini-graph-card/ directory, to get the latest version of the code. Then add the new version number to the end of the card reference url in your ui-lovelace.yaml like below.

resources:
  - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.7
    type: module

Using the card

Options

Name	Type	Default	Since	Description
type	string	required	v0.0.1	`custom:mini-graph-card`.
entity	string	required	v0.0.1	Entity id of the sensor.
icon	string	optional	v0.0.1	Set a custom icon from any of the available mdi icons.
name	string	optional	v0.0.1	Set a custom name which is displayed beside the icon.
unit	string	optional	v0.0.1	Set a custom unit of measurement.
accuracy	number	10	v0.0.1	Specify how many data points should be used to render the graph, higher number equals in a more detailed graph. Results may vary depending on how often the sensor updates. (Recommended to keep between 5 & 50).
height	number	150	v0.0.1	Set a custom height of the line graph.
line_width	number	5	v0.0.1	Set the thickness of the line.
line_color	string	'var(accent-color)'	v0.0.1	Set a custom color for the line in the graph.
more_info	boolean	true	v0.0.1	Set to `false` to disable the "more info" dialog when pressing the card.
hours_to_show	number	24	v0.0.2	Specify how many hours to show.
font_size	number	100	v0.0.3	Adjust the font size of the state value, as percentage of the original size.
line_value_above	number	optional	v0.0.4	Set a threshold, if current state is above this value, the line color will change to color specified in `line_value_above`.
line_color_above	string	optional	v0.0.4	Set the line color for `line_value_above`
line_value_below	number	optional	v0.0.4	Set a threshold, if current state is below this value, the line color will change to color specified in `line_value_below`.
line_color_below	string	optional	v0.0.4	Set the line color for `line_value_below`.
hide_icon	boolean	optional	v0.0.5	Set to `true` to hide icon.

Example usage

Single card

- type: "custom:mini-graph-card"
  entity: sensor.sensor_illumination
  height: 100
  line_width: 4
  font_size: 75
  color: '#3498db'

Show data from the last week

- type: "custom:mini-graph-card"
  entity: sensor.sensor_illumination
  hours_to_show: 168

Stacking horizontally

- type: horizontal-stack
  cards:
    - type: "custom:mini-graph-card"
      entity: sensor.sensor_temperature
      name: Temperature
      line_color: '#3498db'
      line_width: 8
    - type: "custom:mini-graph-card"
      entity: sensor.sensor_humidity
      name: Humidity
      line_color: '#e74c3c'
      line_width: 8
    - type: "custom:mini-graph-card"
      entity: sensor.sensor_pressure
      name: Pressure
      accuracy: 8
      line_width: 8

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest versions of mini-graph-card.js & mini-graph-lib.js.

If you have issues after updating the card, try clearing your browser cache.

License

This project is under the MIT license.

timjong93/mini-graph-card