Overview

Modern energy and power-consumption views for Home Assistant, turning meter and circuit entities into readable charts and summaries for everyday use. Aims to make usage patterns and peaks obvious without exporting data to a separate tool. TypeScript Lovelace front end, HACS distribution, and design tuned for clarity on both phone and desktop dashboards.

README

⚡ Ohm Assistant Card

<img src="assets/card.png" align="center" width="50%"> <h1 align="center">Ohm Assistant Card</h1> Modern energy monitoring and power consumption visualization for Home Assistant

Built with the tools and technologies: <img src="https://img.shields.io/badge/npm-CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" alt="npm"> <img src="https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge&logo=Prettier&logoColor=black" alt="Prettier"> <img src="https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge&logo=TypeScript&logoColor=white" alt="TypeScript"> <img src="https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=for-the-badge&logo=GitHub-Actions&logoColor=white" alt="GitHub%20Actions"> <img src="https://img.shields.io/badge/Lit-324FFF.svg?style=for-the-badge&logo=Lit&logoColor=white" alt="Lit">

Overview

A modern, professional Home Assistant custom card for displaying electricity usage and power consumption data. The Ohm Assistant Card provides real-time energy monitoring with beautiful charts and intuitive area-based entity discovery, making it easy to track your home's energy consumption patterns.

Features

📊 Dual Metric Display

Real-time Power Monitoring - Shows current power consumption in Watts with live updates
Daily Energy Tracking - Displays daily energy usage in kWh with historical data
Dual Y-Axis Charts - Separate scales for power (W) and energy (kWh) on the same chart
Interactive Tooltips - Hover over data points to see exact values and timestamps

🎨 Modern Design

Professional UI - Clean, modern card design with gradient icons and smooth animations
Theme Integration - Automatically adapts to Home Assistant's light and dark themes
Responsive Layout - Optimized for both desktop and mobile viewing
Visual Indicators - Color-coded statistics to understand energy consumption at a glance

🏠 Area-Based Discovery

Automatic Entity Detection - Automatically finds power and energy entities within a specified area
Smart Entity Mapping - Intelligently identifies power (W) and energy (kWh) sensors
Device Integration - Works seamlessly with Home Assistant's area and device structure
Flexible Configuration - Override auto-discovery with custom entity lists

📈 Advanced Charting

Interactive Charts - Built with Chart.js for smooth, responsive data visualization
Chart Type Selection - Choose between Line charts (detailed), Stacked Bar charts (overview), or Stacked Line charts
- Line charts: 5-minute data aggregation for smooth, detailed visualization
- Stacked Line charts: Line charts with stacking enabled for cumulative visualization
- Bar charts: Hourly aggregation for larger, easier-to-read bars with stacking support
Untracked Power Visualization - See power consumption not tracked by individual entities (bar charts only)
- Automatically calculates: untracked = total_power - sum(tracked_power_entities)
- Displays as a gray bar stacked on top of tracked power
- Perfect for identifying phantom loads and unmetered devices
Multiple Line Types - Choose from normal, gradient, gradient-no-fill, or no-fill line styles
Customizable Legends - Configure legend display (entities, compact, or none)
Axis Control - Show/hide X and Y axes independently. Power (W) and Energy (kWh) axes are only displayed when their data is present.
Time-based Data - Automatic time scaling with proper date/time formatting

No Fill

Gradient No Fill

Gradient

Stacked Bar Chart w/ Untracked Consumption

Stacked Line Chart w/ Untracked Consumption

⚙️ Flexible Configuration

Visual Editor - Easy configuration through Home Assistant's card editor
YAML Support - Full YAML configuration for advanced users
Feature Flags - Toggle functionality like hiding card name or excluding default entities
Chart Customization - Fine-tune chart appearance and behavior
Entity Override - Specify custom entities to include or exclude

Installation

Prerequisites

[!NOTE]
This card works with any Home Assistant entities that have device_class: power (for Watts) or device_class: energy (for kWh). No additional integrations are required.

HACS (Recommended)

NOTE: may not work until the project is added to HACS official, see Manual Installation

Open HACS in your Home Assistant instance
Click the menu icon in the top right and select "Custom repositories"
Add this repository URL and select "Dashboard" as the category
- https://github.com/homeassistant-extras/ohm-assistant
Click "Install"

Manual Installation

Download the ohm-assistant.js file from the latest release in the Releases tab.
Copy it to your www/community/ohm-assistant/ folder
Add the following to your configuration.yaml (or add as a resource in dashboards menu)

lovelace:
  resources:
    - url: /local/community/ohm-assistant/ohm-assistant.js
      type: module

Usage

Add the card to your dashboard using the UI editor or YAML:

Card Editor

The card is fully configurable through the card editor, allowing you to customize:

Area selection for automatic entity discovery
Custom entity lists
Chart configuration options
Feature toggles

YAML

This is the most minimal configuration needed to get started:

type: custom:area-energy-card
area: living_room

For custom entity configuration:

type: custom:area-energy-card
area: living_room
entities:
  - sensor.living_room_power
  - sensor.living_room_energy

The card will automatically:

Detect power and energy entities within the specified area
Create beautiful charts with dual Y-axis (power in W, energy in kWh)
Display real-time data with historical context
Adapt to your Home Assistant theme

Configuration Options

Name	Type	Default	Description
area	string	Required	The area name to automatically discover energy/power entities
name	string	Area Energy	Custom name for the card
entities	array	auto	Custom list of entities to include (see Entity Configuration)
chart	object	none	Chart configuration options
features	array	none	Feature flags to enable/disable functionality

Entity Configuration

The entities field accepts two formats:

String Format (simple entity IDs):

entities:
  - sensor.living_room_power
  - sensor.living_room_energy

Object Format (with custom colors and names):

entities:
  - entity_id: sensor.living_room_power
    color: '#ff0000' # Hex color
  - entity_id: sensor.living_room_energy
    color: 'rgba(0, 255, 0, 0.8)' # RGBA color with transparency
  - entity_id: sensor.waschmaschinensteckdose_leistung
    name: Waschmaschine # Custom display name in charts/legends
  - entity_id: sensor.kuhlschrank_garage_leistung
    name: Kühlschrank Garage
  - entity_id: sensor.bedroom_power
    color: 'primary' # Home Assistant theme color

Mixed Format (combine both):

entities:
  - sensor.living_room_power # Uses default color
  - entity_id: sensor.living_room_energy
    color: '#00ff00' # Custom color

When using the object format:

entity_id (required): The entity ID string
color (optional): Color value in any CSS format (hex, rgba, named colors, etc.) or Home Assistant theme colors (primary, accent, red, blue, green, etc.)
name (optional): Custom display name for the entity in charts and legends (e.g. "Waschmaschine" instead of the entity's friendly_name)

Entities without custom colors will use the default color scheme based on their type (power/energy) and position.

Chart Configuration

Name	Type	Default	Description
chart_type	string	line	Chart type: line (detailed), stacked_bar (overview), or stacked_line (stacked lines)
total_power_entity	string	none	Total power entity ID for untracked power visualization (stacked charts only)
legend_style	string	entities	Legend display style: entities, compact, none
axis_style	string	all	Axis display: all, x_only, y_only, none. Power/Energy axes are only shown when their data is present.
line_type	string	normal	Line style: normal, gradient, gradient_no_fill, no_fill

Feature Flags

Feature	Description
hide_name	Hide the card name from display
exclude_default_entities	Exclude default auto-discovered entities

Entity Requirements

Power Entity:

device_class: power
unit_of_measurement: W
Example: sensor.living_room_power

Energy Entity:

device_class: energy
unit_of_measurement: kWh
Example: sensor.living_room_energy

Auto-discovery

The card automatically discovers energy and power entities within the specified area based on:

Entity device_class (power or energy)
Entity unit_of_measurement (W for power, kWh for energy)
Entity relationships to the area

This includes sensors with the appropriate device classes and units.

Example Configurations

Basic Configuration

type: custom:area-energy-card
area: living_room

With Custom Name

type: custom:area-energy-card
area: living_room
name: 'Living Room Energy Monitor'

With Custom Entities

type: custom:area-energy-card
area: living_room
entities:
  - sensor.living_room_power
  - sensor.living_room_energy

With Custom Entity Colors and Names

type: custom:area-energy-card
area: living_room
entities:
  - sensor.living_room_power # Default color
  - entity_id: sensor.living_room_energy
    color: '#ff6b6b' # Custom red color
  - entity_id: sensor.kitchen_power
    color: '#4ecdc4' # Custom teal color
    name: Kühlschrank Garage # Custom display name
  - entity_id: sensor.bedroom_power
    color: 'primary' # Home Assistant theme color

With Chart Configuration

type: custom:area-energy-card
area: living_room
chart:
  chart_type: stacked_bar # Use bar charts for better overview
  legend_style: compact
  axis_style: y_only
  line_type: gradient

With Untracked Power Visualization

type: custom:area-energy-card
area: living_room
chart:
  chart_type: stacked_bar # Required for untracked power
  total_power_entity: sensor.total_power # Your total power entity

Note: Untracked power visualization only works with chart_type: stacked_bar or chart_type: stacked_line. The card will automatically calculate and display the difference between total power and the sum of tracked power entities.

With Feature Flags

type: custom:area-energy-card
area: living_room
features:
  - hide_name
  - exclude_default_entities

Full Configuration Example

type: custom:area-energy-card
area: living_room
name: 'Living Room Energy Monitor'
entities:
  - sensor.living_room_power # Default color
  - entity_id: sensor.living_room_energy
    color: '#10b981' # Custom green color
chart:
  chart_type: stacked_bar # Use bar charts
  total_power_entity: sensor.total_power # Track untracked power
  legend_style: entities
  axis_style: all
  line_type: gradient_no_fill
features:
  - hide_name

Screenshots

Coming soon - screenshots of the card in action will be added here.

Project Roadmap

Contributing

💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
🐛 Report Issues: Submit bugs found or log feature requests for the ohm-assistant project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs.
📣 Check out discord: Need further help, have ideas, want to chat?
🃏 Check out my other cards! Maybe you have an integration that I made cards for.

<details closed> <summary>Contributing Guidelines</summary>

Fork the Repository: Start by forking the project repository to your GitHub account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/homeassistant-extras/ohm-assistant
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to GitHub: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!