Home Assistant Solar Dashboard — Build a Beautiful Lovelace Energy View

The default HA Energy dashboard is useful but limited. A custom Lovelace dashboard gives you exactly the information you want, laid out the way you want it, updating in real time. Here's how to build a production-quality solar monitoring dashboard based on a real 10kW SolaX installation with 869 entities.

Dashboard Structure

A good solar dashboard has three layers of information:

1. Glanceable status — current production, battery SOC, grid state at a glance
2. Today's story — how the day has gone: production curve, import/export totals
3. Controls — geyser, pool pump, AC quick toggles with power monitoring

The Production Sparkline Card

A mini-graph-card showing PV power over the last 12 hours is the most useful single card on a solar dashboard. You can instantly see sunrise, peak production, cloud cover dips, and current output.

type: custom:mini-graph-card
name: Solar Production Today
entities:
  - entity: sensor.solax_pv_power_total
    name: PV Power
    color: '#f5a623'
  - entity: sensor.solax_battery_1_power_charge
    name: Battery Charge
    color: '#22c55e'
    y_axis: secondary
hours_to_show: 12
points_per_hour: 4
line_width: 2
fill: true
show:
  labels: true
  icon: true
  state: true
  legend: true

Battery SOC Gauge

A gauge card with colour zones gives immediate visual feedback on battery state:

type: gauge
entity: sensor.solax_battery_soc
name: Battery
min: 0
max: 100
needle: true
severity:
  green: 60
  yellow: 30
  red: 0
unit: "%"

Energy Flow Card (HA Built-In)

HA's built-in energy-distribution card shows the live flow between solar, battery, grid, and home consumption as a visual diagram. This requires the Energy dashboard to be configured first (Settings → Energy → add your kWh sensors). Once configured:

type: energy-distribution
title: Live Energy Flow

Quick Controls with Power Monitoring

Button-card lets you build toggle buttons that show current power consumption. This is ideal for geyser, pool pump, and other controllable loads:

type: custom:button-card
entity: switch.geyser
name: Geyser
icon: mdi:water-boiler
show_state: true
tap_action:
  action: toggle
styles:
  card:
    - background: >
        [[[ return entity.state === 'on'
          ? 'rgba(245,166,35,0.12)'
          : 'rgba(28,32,48,1)' ]]]
    - border: >
        [[[ return entity.state === 'on'
          ? '1px solid rgba(245,166,35,0.4)'
          : '1px solid rgba(42,53,80,1)' ]]]
  icon:
    - color: >
        [[[ return entity.state === 'on' ? '#f5a623' : '#6b7a9a' ]]]
  name:
    - color: '#e8eaf6'

Today's Stats Summary Card

type: entities
title: Today's Energy
show_header_toggle: false
entities:
  - entity: sensor.solax_today_s_solar_energy
    name: ☀️ Solar Produced
    icon: mdi:solar-power
  - entity: sensor.solax_today_s_import_energy
    name: 🔌 Grid Imported
    icon: mdi:transmission-tower-import
  - entity: sensor.solax_today_s_export_energy
    name: ⚡ Grid Exported
    icon: mdi:transmission-tower-export
  - type: divider
  - type: attribute
    entity: sensor.solax_pv_power_total
    name: Current PV Power
    attribute: friendly_name
  - entity: sensor.solax_battery_soc
    name: 🔋 Battery SOC
    icon: mdi:battery

Putting It Together — Full Dashboard YAML

In HA → your dashboard → Edit → three-dot menu → Raw Configuration Editor. Paste your cards into the views section. The grid card type arranges your cards in a responsive masonry layout that works on both desktop and mobile.