Modern energy monitoring and power consumption visualization for Home Assistant

Built with the tools and technologies:

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.

• 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

• 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

• 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

• Interactive Charts - Built with Chart.js for smooth, responsive data visualization
• Chart Type Selection - Choose between Line charts (detailed) or Stacked Bar charts (overview)
  • Line charts: 5-minute data aggregation for smooth, detailed 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
• Time-based Data - Automatic time scaling with proper date/time formatting

No Fill

Gradient No Fill

Gradient

Bar Chart w/ Untracked Consumption

• 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

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

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

1. Download the ohm-assistant.js file from the latest release in the Releases tab.
2. Copy it to your www/community/ohm-assistant/ folder
3. 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

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

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

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

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):

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.kitchen_power
    color: 'blue' # Named color
  - entity_id: sensor.bedroom_power
    color: 'primary' # Home Assistant theme color
  - entity_id: sensor.bedroom_energy
    color: 'accent' # 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.)

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

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

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.

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

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

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

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
  - entity_id: sensor.bedroom_power
    color: 'primary' # Home Assistant theme color

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

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. The card will automatically calculate and display the difference between total power and the sum of tracked power entities.

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

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

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

• Initial design: Create initial area energy card design
• Area-based discovery: Automatic detection of energy/power entities within areas
• Dual metric display: Real-time power (W) and energy (kWh) visualization
• Chart integration: Chart.js implementation with dual Y-axis support
• Modern UI: Professional design with theme integration
• Configuration options: Visual editor and YAML support
• Feature flags: Toggle functionality like hiding card name
• Chart customization: Multiple line types and legend styles
• Performance optimization: Efficient rendering with memoization
• TypeScript support: Full type safety and modern development
• UI improvements: Tweaks and changes for the UI - thanks @LamarcLS
• Custom entity colors: Choose colors for individual chart items - thanks @LamarcLS
• Chart type selection: Line and Stacked Bar chart options - thanks @LamarcLS
• Untracked power visualization: Visualize power consumption not tracked by individual entities - thanks @LamarcLS

• 💬 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.

• Node.js 18+
• Yarn or npm

cd ohm-assistant
yarn install

yarn watch

yarn build

yarn test

yarn format

This project is protected under the MIT License. For more details, refer to the LICENSE file.

• Built using LitElement
• Chart visualization powered by Chart.js
• Inspired by modern energy monitoring dashboards
• Thanks to all contributors!

Forgive me and my badges..

Stats

Ratings