Skip to content

Dashboards

David Rapan edited this page Aug 9, 2025 · 24 revisions

🐎 Horseshoe gauges

wiki_horseshoe

Dependency: Flexible Horseshoe Card for Lovelace, card-mod, Solcast PV Forecast integration (for 'REMAINING')

Code

Change entities in following snippet accordingly πŸ˜‰

- title: Energy
  path: energy
  icon: mdi:flash
  type: sections
  sections:
    - type: grid
      cards:
        - type: custom:flex-horseshoe-card
          view_layout:
            grid-area: g3
          entities:
            - entity: sensor.inverter_grid_power
              unit: W
              decimals: 0
              name: Grid
            - entity: sensor.inverter_grid_l1_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_grid_l1_voltage
              unit: V
            - entity: sensor.inverter_grid_l2_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_grid_l2_voltage
              unit: V
            - entity: sensor.inverter_grid_l3_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_grid_l3_voltage
              unit: V
            - entity: sensor.inverter_grid_frequency
              unit: Hz
            - entity: sensor.grid_metrics_total_cost
              unit: CZK
              name: Per kWh
            - entity: sensor.inverter_today_energy_export
              unit: kWh
              name: Export
            - entity: sensor.inverter_today_energy_import
              unit: kWh
              name: Import
          show:
            horseshoe_style: autominmax
          layout:
            hlines:
              - xpos: 50
                ypos: 40
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
              - xpos: 50
                ypos: 60
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
            vlines:
              - xpos: 37
                ypos: 50
                length: 18
                styles:
                  - stroke: var(--disabled-text-color);
                  - stroke-linecap: square;
              - xpos: 63
                ypos: 50
                length: 18
                styles:
                  - stroke: var(--disabled-text-color);
                  - stroke-linecap: square;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 34
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 34
                ypos: 49
                styles:
                  - font-size: 1.2em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 34
                ypos: 56
                styles:
                  - font-size: .9em;
                  - text-anchor: end;
              - id: 3
                entity_index: 3
                xpos: 51
                ypos: 49
                styles:
                  - font-size: 1.2em;
              - id: 4
                entity_index: 4
                xpos: 51
                ypos: 56
                styles:
                  - font-size: .9em;
              - id: 5
                entity_index: 5
                xpos: 66
                ypos: 49
                styles:
                  - font-size: 1.2em;
                  - text-anchor: start;
              - id: 6
                entity_index: 6
                xpos: 66
                ypos: 56
                styles:
                  - font-size: .9em;
                  - text-anchor: start;
              - id: 7
                entity_index: 7
                xpos: 50
                ypos: 16
                styles:
                  - font-size: .8em;
              - id: 8
                entity_index: 8
                xpos: 50
                ypos: 75
                styles:
                  - font-size: 2em;
              - id: 9
                entity_index: 9
                xpos: 100
                ypos: 5
                styles:
                  - text-anchor: end;
                  - font-size: 1.1em;
              - id: 10
                entity_index: 10
                xpos: 0
                ypos: 5
                styles:
                  - text-anchor: start;
                  - font-size: 1.1em;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 95
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 8
                xpos: 50
                ypos: 80
                styles:
                  - font-size: 0.5em;
              - id: 2
                entity_index: 9
                xpos: 100
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: end;
              - id: 3
                entity_index: 10
                xpos: 0
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: start;
          horseshoe_scale:
            min: 0
            max: 22080
            width: 6
          color_stops:
            '0': var(--energy-grid-consumption-color)
    - type: grid
      cards:
        - type: custom:flex-horseshoe-card
          view_layout:
            grid-area: g1
          entities:
            - entity: sensor.inverter_pv_power
              decimals: 0
              unit: W
              name: Solar
            - entity: sensor.inverter_pv1_power
              decimals: 0
              unit: W
              name: East
            - entity: sensor.inverter_pv2_power
              decimals: 0
              unit: W
              name: West
            - entity: sensor.inverter_pv1_voltage
              unit: V
            - entity: sensor.inverter_pv2_voltage
              unit: V
            - entity: sensor.inverter_pv1_current
              unit: A
            - entity: sensor.inverter_pv2_current
              unit: A
            - entity: sensor.inverter_today_production
              unit: kWh
              name: Production
            - entity: sensor.solcast_pv_forecast_forecast_remaining_today
              decimals: 1
              unit: kWh
              name: Remaining
          show:
            horseshoe_style: autominmax
          layout:
            hlines:
              - xpos: 50
                ypos: 40
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
            vlines:
              - xpos: 50
                ypos: 60
                length: 39
                styles:
                  - stroke: var(--disabled-text-color);
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 34
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 44
                ypos: 55
                styles:
                  - font-size: 1.6em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 56
                ypos: 55
                styles:
                  - text-anchor: start;
                  - font-size: 1.6em;
              - id: 3
                entity_index: 3
                xpos: 44
                ypos: 65
                styles:
                  - text-anchor: end;
                  - font-size: 1.3em;
              - id: 4
                entity_index: 4
                xpos: 56
                ypos: 65
                styles:
                  - text-anchor: start;
                  - font-size: 1.3em;
              - id: 5
                entity_index: 5
                xpos: 44
                ypos: 75
                styles:
                  - text-anchor: end;
                  - font-size: 1.3em;
              - id: 6
                entity_index: 6
                xpos: 56
                ypos: 75
                styles:
                  - text-anchor: start;
                  - font-size: 1.3em;
              - id: 7
                entity_index: 7
                xpos: 0
                ypos: 5
                styles:
                  - text-anchor: start;
                  - font-size: 1.1em;
              - id: 8
                entity_index: 8
                xpos: 100
                ypos: 5
                styles:
                  - text-anchor: end;
                  - font-size: 1.1em;
            icons:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 15
                align: center
                icon_size: 1.2
                styles:
                  - color: var(--energy-solar-color);
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 95
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 1
                xpos: 15
                ypos: 45
                styles:
                  - text-anchor: start;
                  - font-size: 0.5em;
              - id: 2
                entity_index: 2
                xpos: 85
                ypos: 45
                styles:
                  - text-anchor: end;
                  - font-size: 0.5em;
              - id: 3
                entity_index: 7
                xpos: 0
                ypos: 9
                styles:
                  - text-anchor: start;
                  - font-size: 0.5em;
              - id: 4
                entity_index: 8
                xpos: 100
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: end;
          horseshoe_scale:
            min: 0
            max: 12000
            width: 6
          color_stops:
            '0': var(--energy-solar-color)
            '2000': var(--energy-solar-color)
        - type: custom:flex-horseshoe-card
          view_layout:
            grid-area: g2
          entities:
            - entity: sensor.inverter_battery_power
              decimals: 0
              unit: W
              name: Battery
            - entity: sensor.inverter_battery_voltage
              unit: V
            - entity: sensor.inverter_battery_current
              unit: A
            - entity: sensor.inverter_battery
              decimals: 0
              unit: '%'
            - entity: sensor.inverter_battery_state
            - entity: sensor.energy_management_battery
            - entity: sensor.inverter_battery_capacity
              decimals: 1
            - entity: sensor.inverter_battery_temperature
              unit: Β°C
            - entity: sensor.inverter_today_battery_discharge
              unit: kWh
              name: Discharge
            - entity: sensor.inverter_today_battery_charge
              unit: kWh
              name: Charge
          show:
            horseshoe_style: autominmax
          layout:
            hlines:
              - xpos: 50
                ypos: 40
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
              - xpos: 50
                ypos: 60
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
            vlines:
              - xpos: 50
                ypos: 50
                length: 18
                styles:
                  - stroke: var(--disabled-text-color);
                  - stroke-linecap: square;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 34
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 44
                ypos: 53
                styles:
                  - font-size: 1.4em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 56
                ypos: 53
                styles:
                  - text-anchor: start;
                  - font-size: 1.4em;
              - id: 3
                entity_index: 3
                xpos: 50
                ypos: 75
                styles:
                  - font-size: 2em;
              - id: 4
                entity_index: 4
                xpos: 50
                ypos: 80
                styles:
                  - font-size: 0.5em;
                  - text-transform: uppercase;
              - id: 5
                entity_index: 5
                xpos: 21
                ypos: 65
                styles:
                  - text-anchor: start;
                  - font-size: .7em;
              - id: 6
                entity_index: 6
                xpos: 85
                ypos: 65
                styles:
                  - text-anchor: end;
                  - font-size: .7em;
              - id: 7
                entity_index: 7
                xpos: 50
                ypos: 16
                styles:
                  - font-size: .8em;
              - id: 8
                entity_index: 8
                xpos: 100
                ypos: 5
                styles:
                  - text-anchor: end;
                  - font-size: 1.1em;
              - id: 9
                entity_index: 9
                xpos: 0
                ypos: 5
                styles:
                  - text-anchor: start;
                  - font-size: 1.1em;
            icons:
              - id: 0
                entity_index: 5
                xpos: 4
                ypos: 65.5
                align: start
                size: 0
                styles:
                  - '--mdc-icon-size': 0.65em;
              - id: 1
                entity_index: 6
                xpos: 78
                ypos: 65.5
                align: end
                size: 0
                styles:
                  - '--mdc-icon-size': 0.65em;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 95
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 8
                xpos: 100
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: end;
              - id: 2
                entity_index: 9
                xpos: 0
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: start;
          horseshoe_scale:
            min: 0
            max: 7500
            width: 6
          color_stops:
            '0': var(--energy-battery-in-color)
      column_span: 1
    - type: grid
      cards:
        - type: custom:flex-horseshoe-card
          view_layout:
            grid-area: g3
          entities:
            - entity: sensor.inverter_load_power
              unit: W
              decimals: 0
              name: Load
            - entity: sensor.inverter_load_l1_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_load_l1_voltage
              unit: V
            - entity: sensor.inverter_load_l2_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_load_l2_voltage
              unit: V
            - entity: sensor.inverter_load_l3_power
              decimals: 0
              unit: W
            - entity: sensor.inverter_load_l3_voltage
              unit: V
            - entity: sensor.inverter_temperature
              unit: Β°C
            - entity: sensor.inverter_power_losses
              decimals: 0
              unit: W
              name: Losses
            - entity: sensor.inverter_today_losses
              unit: kWh
              name: Losses
            - entity: sensor.inverter_today_load_consumption
              unit: kWh
              name: Consumption
          show:
            horseshoe_style: autominmax
          layout:
            hlines:
              - xpos: 50
                ypos: 40
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
              - xpos: 50
                ypos: 60
                length: 70
                styles:
                  - stroke: var(--disabled-text-color);
            vlines:
              - xpos: 37
                ypos: 50
                length: 18
                styles:
                  - stroke: var(--disabled-text-color);
                  - stroke-linecap: square;
              - xpos: 63
                ypos: 50
                length: 18
                styles:
                  - stroke: var(--disabled-text-color);
                  - stroke-linecap: square;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 34
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 34
                ypos: 49
                styles:
                  - font-size: 1.2em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 34
                ypos: 56
                styles:
                  - font-size: .9em;
                  - text-anchor: end;
              - id: 3
                entity_index: 3
                xpos: 51
                ypos: 49
                styles:
                  - font-size: 1.2em;
              - id: 4
                entity_index: 4
                xpos: 51
                ypos: 56
                styles:
                  - font-size: .9em;
              - id: 5
                entity_index: 5
                xpos: 66
                ypos: 49
                styles:
                  - font-size: 1.2em;
                  - text-anchor: start;
              - id: 6
                entity_index: 6
                xpos: 66
                ypos: 56
                styles:
                  - font-size: .9em;
                  - text-anchor: start;
              - id: 7
                entity_index: 7
                xpos: 50
                ypos: 16
                styles:
                  - font-size: .8em;
              - id: 8
                entity_index: 8
                xpos: 50
                ypos: 75
                styles:
                  - font-size: 2em;
              - id: 9
                entity_index: 9
                xpos: 100
                ypos: 5
                styles:
                  - text-anchor: end;
                  - font-size: 1.1em;
              - id: 10
                entity_index: 10
                xpos: 0
                ypos: 5
                styles:
                  - text-anchor: start;
                  - font-size: 1.1em;
            icons:
              - id: 0
                entity_index: 1
                xpos: 30
                ypos: 52
                align: start
                size: 1
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 95
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 8
                xpos: 50
                ypos: 80
                styles:
                  - font-size: 0.5em;
              - id: 2
                entity_index: 9
                xpos: 100
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: end;
              - id: 3
                entity_index: 10
                xpos: 0
                ypos: 9
                styles:
                  - font-size: 0.5em;
                  - text-anchor: start;
          horseshoe_scale:
            min: 0
            max: 22080
            width: 6
          color_stops:
            '0': var(--energy-battery-out-color)
  cards: []
  max_columns: 3

⚑ Power Flow Card Plus

power_flow_card_plus

Dependency: Power Flow Card Plus, card-mod

Code

Change entities in following snippet accordingly πŸ˜‰

type: custom:power-flow-card-plus
entities:
battery:
  entity: sensor.inverter_battery_power
  display_state: one_way_no_zero
  invert_state: false
  color_value: true
  use_metadata: true
  name: ' '
  state_of_charge_unit_white_space: false
  state_of_charge: sensor.inverter_battery
  color_icon: true
  color_circle: true
  display_zero_tolerance: 20
grid:
  entity: sensor.inverter_grid_power
  display_state: one_way
  use_metadata: true
  color_icon: true
  color_value: true
  invert_state: false
  icon: mdi:transmission-tower
  color_circle: true
  name: ' '
  display_zero_tolerance: 0
  secondary_info:
    entity: sensor.grid_metrics_total_cost
    decimals: 2
    unit_of_measurement: ' '
  power_outage:
    entity: binary_sensor.inverter_grid
    state_alert: 'off'
solar:
  entity: sensor.inverter_pv_power
  display_state: one_way
  use_metadata: true
  display_zero_state: false
  invert_state: false
  color_icon: true
  secondary_info: {}
  name: ' '
  color_value: false
  icon: mdi:solar-power-variant
home:
  entity: sensor.inverter_load_power
  override_state: true
  subtract_individual: false
  use_metadata: true
  name: ' '
  icon: ' '
  secondary_info:
    entity: sensor.inverter_power_losses
    icon: ''
fossil_fuel_percentage: {}
clickable_entities: true
display_zero_lines:
mode: transparency
transparency: 75
grey_color:
  - 189
  - 189
  - 189
use_new_flow_rate_model: true
w_decimals: 0
kw_decimals: 1
min_flow_rate: 0.75
max_flow_rate: 6
max_expected_power: 12000
min_expected_power: 0.01
watt_threshold: 1000
transparency_zero_lines: 0
dashboard_link: /energy
card_mod:
style:
  .: >
    .home span.secondary-info, .grid span.secondary-info,
    span#battery-state-of-charge-text {
      font-size: 90%;
      color: var(--secondary-text-color) !important;
    }

πŸ“Š Apexcharts & Plotly Graph Card

forecast_daily_stats_graphs prices_and_import_export

Dependency: apexcharts-card, Plotly Graph Card, card-mod, Solcast PV Forecast integration

Apexcharts code 1

Change entities in following snippet accordingly πŸ˜‰

type: custom:apexcharts-card
view_layout:
grid-area: solar
header:
show: true
show_states: true
colorize_states: true
standard_format: true
apex_config:
grid:
  show: false
chart:
  height: 400px
tooltip:
  enabled: true
  shared: true
  followCursor: true
xaxis:
  axisTicks:
    show: false
  axisBorder:
    show: false
  tooltip:
    enabled: false
graph_span: 4d
now:
show: true
span:
start: day
offset: "-1day"
all_series_config:
type: area
opacity: 0.3
stroke_width: 2
series:
- entity: sensor.inverter_battery
  name: Battery
  float_precision: 0
  type: line
  color: pink
  opacity: 0.8
  yaxis_id: capacity
  extend_to: now
  show:
    legend_value: true
    in_header: false
  group_by:
    func: last
    duration: 5m
- entity: sensor.inverter_pv_power
  name: Solar Power
  float_precision: 3
  color: "#ff9800"
  yaxis_id: kWh
  unit: kW
  transform: return x/1000;
  extend_to: now
  show:
    legend_value: true
    in_header: false
  group_by:
    func: avg
    duration: 5m
- entity: sensor.solcast_pv_forecast_forecast_today
  name: Today's Forecast
  extend_to: false
  color: grey
  opacity: 0.3
  stroke_width: 0
  yaxis_id: kWh
  show:
    legend_value: false
    in_header: false
  data_generator: |
    return entity.attributes.detailedForecast.map((entry) => {
          return [new Date(entry.period_start), entry.pv_estimate];
        });
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
  name: Tomorrow's Forecast
  float_precision: 3
  extend_to: false
  color: grey
  opacity: 0.3
  stroke_width: 0
  yaxis_id: kWh
  show:
    legend_value: false
    in_header: false
  data_generator: |
    return entity.attributes.detailedForecast.map((entry) => {
          return [new Date(entry.period_start), entry.pv_estimate];
        });
- entity: sensor.solcast_pv_forecast_forecast_day_3
  name: Overmorrow's Forecast
  float_precision: 3
  extend_to: false
  color: grey
  opacity: 0.3
  stroke_width: 0
  yaxis_id: kWh
  show:
    legend_value: false
    in_header: false
  data_generator: |
    return entity.attributes.detailedForecast.map((entry) => {
          return [new Date(entry.period_start), entry.pv_estimate];
        });
- entity: sensor.solcast_pv_forecast_forecast_today
  yaxis_id: header_only
  name: Today's Forecast
  color: grey
  show:
    legend_value: true
    in_header: true
    in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_remaining_today
  yaxis_id: header_only
  name: Remaining
  color: grey
  show:
    legend_value: true
    in_header: true
    in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
  yaxis_id: header_only
  name: Tomorrow's Forecast
  color: grey
  show:
    legend_value: true
    in_header: true
    in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_day_3
  yaxis_id: header_only
  name: Overmorrow's Forecast
  color: grey
  show:
    legend_value: true
    in_header: true
    in_chart: false
- entity: sensor.solcast_pv_forecast_api_last_polled
  yaxis_id: header_only
  name: Last updated
  color: grey
  unit: " min."
  transform: return ((Date.now()) - (new Date(x).getTime())) / 60 / 60 / 24
  show:
    legend_value: true
    in_header: true
    in_chart: false
yaxis:
- id: capacity
  show: true
  opposite: true
  decimals: 0
  max: 100
  min: 0
  apex_config:
    tickAmount: 5
- id: kWh
  show: true
  min: 0
  apex_config:
    tickAmount: 5
- id: header_only
  show: false
card_mod:
style:
  .: |
    .apexcharts-tooltip, .apexcharts-xaxistooltip {
      border: 0 !important;
      border-radius: 4px !important;
      box-shadow: 0px 0px 8px 4px rgba(10, 10, 10, .2) !important;
    }
    .apexcharts-tooltip.apexcharts-active, .apexcharts-xaxistooltip.apexcharts-active {
      opacity: 1 !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-title, .apexcharts-tooltip .apexcharts-tooltip-text, .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {
      font-family: var(--ha-font-family-body) !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-title {
      padding: 10px 10px 0px 10px !important;
      background: var(--ha-card-background, var(--card-background-color, #fff)) !important;
      border-bottom: 0 !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-series-group {
      padding-bottom: 10px !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-y-group {
      padding: 0 !important;
    }
Apexcharts code 2

Change entities in following snippet accordingly πŸ˜‰

type: custom:apexcharts-card
update_interval: 1m
graph_span: 25h
header:
show: false
standard_format: true
show_states: true
colorize_states: true
apex_config:
grid:
  show: true
  borderColor: '#555'
  strokeDashArray: 0
chart:
  height: 900px
tooltip:
  enabled: false
  shared: true
  followCursor: true
xaxis:
  axisTicks:
    show: false
  axisBorder:
    show: false
  tooltip:
    enabled: false
yaxis:
- id: left
  decimals: 2
  apex_config:
    tickAmount: 14
    forceNiceScale: true
- id: right
  min: 0
  opposite: true
  decimals: 0
  apex_config:
    stepSize: 1
    tickAmount: 7
    forceNiceScale: true
stacked: false
series:
- entity: sensor.grid_metrics_total_cost
  yaxis_id: right
  type: line
  stroke_width: 3
  name: Tedom
  color: orange
  group_by:
    func: last
    duration: 1m
- entity: sensor.grid_metrics_total_spot_full
  yaxis_id: right
  type: line
  stroke_width: 3
  name: bezDodavatele
  color: green
  group_by:
    func: last
    duration: 1m
- entity: sensor.grid_metrics_total_spot_full
  yaxis_id: right
  type: line
  stroke_width: 1
  stroke_dash: 5
  name: bezDodavatele avg
  color: green
  group_by:
    func: avg
    duration: 24h
- entity: sensor.grid_metrics_total_spot
  yaxis_id: right
  type: line
  stroke_width: 3
  name: Spot + Regulated price
  color: rgb(231, 76, 60)
  group_by:
    func: last
    duration: 1m
- entity: sensor.current_spot_electricity_price
  yaxis_id: right
  type: line
  stroke_width: 3
  name: Spot price
  color: rgb(0, 141, 253)
  group_by:
    func: last
    duration: 1m
- entity: sensor.grid_metrics_total_spot_export
  yaxis_id: right
  type: line
  stroke_width: 3
  name: Spot Export price
  color: rgb(241, 196, 15)
  group_by:
    func: last
    duration: 1m
- entity: sensor.grid_metrics_total_spot_export
  yaxis_id: right
  type: line
  stroke_width: 1
  stroke_dash: 5
  name: Spot Export price avg
  color: rgb(241, 196, 15)
  group_by:
    func: avg
    duration: 24h
- entity: sensor.grid_total_energy_bought
  yaxis_id: left
  type: column
  stack_group: Energy
  stroke_width: 1
  name: Import
  color: rgb(84, 144, 194)
  group_by:
    func: delta
    duration: 5min
- entity: sensor.grid_total_energy_sold
  yaxis_id: left
  type: column
  stack_group: Energy
  stroke_width: 1
  name: Export
  invert: true
  color: rgb(162, 128, 219)
  group_by:
    func: delta
    duration: 5min
card_mod:
style:
  .: |
    .apexcharts-tooltip, .apexcharts-xaxistooltip {
      border: 0 !important;
      border-radius: 4px !important;
      box-shadow: 0px 0px 8px 4px rgba(10, 10, 10, .2) !important;
    }
    .apexcharts-tooltip.apexcharts-active, .apexcharts-xaxistooltip.apexcharts-active {
      opacity: 1 !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-title, .apexcharts-tooltip .apexcharts-tooltip-text, .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {
      font-family: var(--ha-font-family-body) !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-title {
      padding: 10px 10px 0px 10px !important;
      background: var(--ha-card-background, var(--card-background-color, #fff)) !important;
      border-bottom: 0 !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-series-group {
      padding-bottom: 10px !important;
    }
    .apexcharts-tooltip .apexcharts-tooltip-y-group {
      padding: 0 !important;
    }
Plotly code

Change entities in following snippet accordingly πŸ˜‰

type: custom:plotly-graph
title: null
time_offset: 10h
hours_to_show: 8d
refresh_interval: 120
view_layout:
grid-area: daily
layout:
xaxis:
  showgrid: false
yaxis:
  showgrid: false
  fixedrange: true
legend:
  bgcolor: rgba(0,0,0,0)
  itemsizing: constant
  font:
    size: 12
height: 450
config:
displayModeBar: false
scrollZoom: false
entities:
- entity: sensor.inverter_total_energy_export
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "πŸ’° " + "Export" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  texttemplate: "%{y}"
  filters:
    - filter: i>0
    - delta
  marker:
    color: rgb(162, 128, 219)
- entity: sensor.inverter_total_energy_import
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "πŸ’‘ " + "Import" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  texttemplate: "%{y}"
  filters:
    - filter: i>0
    - delta
  marker:
    color: rgb(84, 144, 194)
- entity: sensor.inverter_total_production
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "β˜€οΈ " + "Solar" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  texttemplate: "%{y}"
  filters:
    - filter: i>0
    - delta
  marker:
    color: rgb(255, 152, 0)
- entity: sensor.inverter_total_load_consumption
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "⚑ " + "Load" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  filters:
    - filter: i>0
    - delta
  texttemplate: "%{y}"
  marker:
    color: rgb(95, 182, 173)
- entity: sensor.inverter_total_battery_charge
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "πŸ”‹ " + "Battery Charge" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  texttemplate: "%{y}"
  filters:
    - filter: i>0
    - delta
  marker:
    color: rgb(240, 98, 146)
- entity: sensor.inverter_total_battery_discharge
  statistic: state
  name: |
    $fn ({ ys,meta }) =>
      "πŸ”‹ " + "Battery Discharge" + " (" +ys[ys.length - 1]+"kWh)"
  period: day
  type: bar
  texttemplate: "%{y}"
  filters:
    - filter: i>0
    - delta
  marker:
    color: pink

Clone this wiki locally