mini-graph-card: Minimalistic Graph Card for Home Assistant Lovelace UI

Introduction

The mini-graph-card is a highly popular and versatile custom Lovelace UI card designed for Home Assistant. Developed by kalkih, this project offers a minimalistic yet powerful way to visualize sensor data directly within your smart home dashboard. With 3731 stars and 265 forks, it's a testament to its utility and community adoption. Written in JavaScript and distributed under the MIT license, it provides a flexible solution for displaying historical data from various entities.

Its core functionality revolves around presenting the current state of sensors alongside a clean line graph representation of their history. Whether you're tracking temperature, humidity, energy consumption, or binary sensor states, mini-graph-card offers extensive customization options to fit your aesthetic and data visualization needs.

Installation

Getting started with mini-graph-card is straightforward, with several installation methods available:

HACS (Recommended)

The easiest way to install is through the Home Assistant Community Store (HACS). Simply search for 'Mini Graph Card' and follow the prompts.

Manual Install

1. Download and copy mini-graph-card-bundle.js from the latest release into your config/www directory.
2. Add the resource reference as described below.

CLI Install

1. Move into your config/www directory.
2. Grab mini-graph-card-bundle.js:

$ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.13.0/mini-graph-card-bundle.js

3. Add the resource reference as described below.

Add Resource Reference

If you configure Lovelace via YAML, add a reference to mini-graph-card-bundle.js inside your configuration.yaml:

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

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there).
2. Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon.
3. Enter URL /local/mini-graph-card-bundle.js and select type "JavaScript Module". (Use /hacsfiles/mini-graph-card/mini-graph-card-bundle.js and select "JavaScript Module" for HACS install).
4. Restart Home Assistant.

Examples

The mini-graph-card offers a wide array of configuration options to visualize your data. Here are a few examples to get you started:

Single Entity Card

Display a simple graph for a single sensor.

type: custom:mini-graph-card
entities:
 - sensor.illumination

Multiple Entities Card

Combine several related sensors into one graph for a comprehensive overview.

type: custom:mini-graph-card
name: SERVER
icon: mdi:server
entities:
  - entity: sensor.server_total
    name: TOTAL
  - sensor.server_sent
  - sensor.server_received

Bar Chart Card

Visualize data using a bar chart instead of a line graph, useful for aggregated values like daily consumption.

type: custom:mini-graph-card
entities:
  - entity: sensor.energy_consumption
name: ENERGY CONSUMPTION
show:
  graph: bar

Dynamic Line Color

Set thresholds to dynamically change the graph's line color based on sensor values.

type: custom:mini-graph-card
entities:
  - sensor.sensor_temperature
show:
  labels: true
color_thresholds:
  - value: 20
    color: "#f39c12"
  - value: 21
    color: "#d35400"
  - value: 21.5
    color: "#c0392b"

Non-numeric Sensor States

Graph binary sensors or other non-numeric states by mapping their values to a numerical representation.

type: custom:mini-graph-card
entities:
  - entity: binary_sensor.living_room_motion
    name: Living room
  - entity: binary_sensor.corridor_motion
    name: Corridor
  - entity: binary_sensor.master_bed_motion
    name: Master bed.
    color: green
  - entity: binary_sensor.bedroom_motion
    name: Bedroom
name: Motion last hour
hours_to_show: 1
points_per_hour: 60
update_interval: 30
aggregate_func: max
line_width: 2
smoothing: false
state_map:
  - value: "off"
    label: Clear
  - value: "on"
    label: Detected

Why Use mini-graph-card?

The mini-graph-card stands out for its exceptional flexibility and aesthetic appeal in Home Assistant dashboards. Its minimalistic design ensures that your UI remains clean and uncluttered, while offering deep customization options to tailor graphs precisely to your needs. From dynamic color thresholds and multiple entity support to advanced data aggregation and handling non-numeric states, it provides powerful visualization capabilities. It's an essential tool for anyone looking to enhance their Home Assistant Lovelace interface with clear, informative, and beautiful data representations.

Links

Explore the mini-graph-card repository on GitHub for more details, advanced configurations, and to contribute to the project:

• GitHub Repository: kalkih/mini-graph-card