Energy Custom Graph. A custom card to use Home Assistants internal EChart library with more flexibility

[Thyraz]

OK, this topic has been on my to-do list for a VERY long time. Including an extremely detailed list of features that I wanted, which developed over time in my notes app. (Since the energy dashboard with its date picker was released.)

A chart that

• interacts with the Energy Date Picker
• uses the HA internal Echart instance without requiring additional large charting frameworks
• has a native design
• also supports RAW short-term history
• allows mixed bar/line charts
• allows the value for the current hour to be filled in from the previous 5-minute aggregations (in hourly bar charts).
• many more ideas

The problem was that a lot of the code from the core energy cards couldn’t be easily extracted for custom Cards. (And I already have more than enough side projects besides my job and family.)

The only reason I can now share this card here is the fact that LLMs have become extremely good at recognizing and resolving such complex relationships.

That way I was able to build a boilerplate card (and all the needed helpers from HA that I couldn’t access from a custom card) using the HA internal Echarts instance within minutes instead of most likely days/weeks of tinkering.

Using the internal Echarts instance keeps the card light-weighted, but also has the potential to break the card more likely.
So be warned: This is experimental and because of missing spare time a lot of this card was created with me, babysitting gpt-5-codex.
I did that step by step, checking the changes after each request, but still: There’s a lot code in this card I’ve never seen.

But let’s move on to the positive aspects of the story:

This is a card that can be installed through HACS and checks all the marks above, coming along with a graphical editor for easy setup.

Mixed line and bar charts (rebuilding the core energy graph, but adding the house battery charging state as a line to get a better feeling for this bars):

Line charts in different styles:

Step charts from RAW (short-term) history, mapping boolean string values like open/closed as 0/1numeric values:

Calculate virtual signals based on multiple outdoor sensors, add constants to series and fill the area between them to get the look that you want:

It can use the compare feature of the energy date picker, similar as with the core card.
You can even change the color for the compare signal to something different, which helps a lot to not get lost when used with line-charts:

Everything can be configured through a graphical editor:

More information can be found on the Github page (including the needed steps for the installation):

GitHub - Thyraz/energy-custom-graph: Custom Home Assistant graph card based on the...

[Thyraz]

New update available which fixes some bugs around auto-refresh and style updates to adapt the core energy cards further.

[Thyraz]

Another update should show up (0.4.0), which adds live streaming of new data points for raw signals (used a 60s polling for new data points so far).
That way you should see new values immediately, for example in room temp charts using raw mode.

[mzwanzi]

love this, thank you very much!!

[Thyraz]

Thanks for the reply.

Wasn’t sure if anyone is using it at all (beside me), due to the lack of responses in this thread.

[maurizio53 (Maurizio Fabiani)]

I am using it, very nice feature…

[zuz242]

I just stumbled over this card, will try. Thanks

[markpurcell]

Thank you.

Your energy Custom Graph is reporting solar self consumption, battery charging and discharging from the grid correctly. Which isn’t handled by the HA Core chart.

Is there a possibility to include multiple batteries with your card?

[Thyraz]

I’m on my way to bed. So, not sure whether I’m able to think this through at the moment.

Do you wanna add them up like a single, large battery?

The card supports calculated signals.
That way each point in time will be added/subtracted or whatever you define and displayed as single signal.

Not sure if this is what you’re after. Otherwise let’s continue this after some sleep.

[markpurcell]

Thanks,

I have now been able to apply the calculation to both battery charge and discharging with my bidirectional EV charger. I.e. I now have the total cycle of my bidirectional DCEV charger as well as my fixed battery.

This is great as the hourly chart now matches and shows all energy flows for the day.

Your card wouldn’t let me add additional terms to the battery elements via the UI, but I could in the code editor directly.

I am wondering if I can specify different shades of pink for charging (the different batteries) and different shades of green for discharging…

Same dates as above.

type: custom:energy-custom-graph-card
hide_legend: true
series:
  - name: Solar self consumed
    chart_type: bar
    color: "--energy-solar-color"
    stack: energy
    clip_min: 0
    calculation:
      unit: kWh
      terms:
        - statistic_id: sensor.sigen_plant_daily_third_party_inverter_energy
          operation: add
          stat_type: change
    hidden_by_default: false
  - name: Imported
    chart_type: bar
    color: "--energy-grid-consumption-color"
    stack: energy
    statistic_id: sensor.sigen_plant_total_imported_energy
  - name: Battery discharge
    chart_type: bar
    color: "--energy-battery-out-color"
    stack: energy
    hidden_by_default: false
    calculation:
      terms:
        - statistic_id: sensor.sigen_plant_total_discharged_energy_of_the_ess
          operation: add
          stat_type: change
        - statistic_id: sensor.sigen_plant_total_discharged_energy_of_the_evdc
          operation: add
          stat_type: change
      unit: kWh
  - statistic_id: sensor.sigen_plant_total_exported_energy
    name: Exported
    chart_type: bar
    multiply: -1
    color: "--energy-grid-return-color"
    stack: energy
  - name: Battery charge
    chart_type: bar
    multiply: -1
    color: "--energy-battery-in-color"
    stack: energy
    calculation:
      terms:
        - statistic_id: sensor.sigen_plant_total_charged_energy_of_the_ess
          operation: add
          stat_type: change
        - statistic_id: sensor.sigen_plant_total_charged_energy_of_the_evdc
          operation: add
          stat_type: change
      unit: kWh
timespan:
  mode: energy
grid_options:
  columns: 24
  rows: 7
title: Thyraz Energy Custom Graph
show_stack_sums: true

[Thyraz]

When I use your code, I can also switch to the UI editor and it shows up correctly.
Did you notice, that the editor removes an existing signal entity when switching to calculation?
The card editor doesn’t transform the old “single” entity into a first term for the calculation. So you have to add that one as first term again.

So you have to:

• Select “calculation” as type of your added signal
• Leave the initial value for the calculation at zero if not needed otherwise
• Add the first term
• Select the first battery as entity for this term and leave the operation set to “add”
• Add another term and select the second battery as entity with the same settings

That way I was also able to recreate your chart just using the UI editor.
If one of these steps fail on your setup, can you decribe which one and how exactly?
Would be very helpful in case there’s a bug to be fixed.

About the colors:
If you use a calculated signal, this really ends up as one combined array of values in the chart data.
The values are combined based on the calculation logic before the final data is handed to the chart instance.

But you don’t have to use it that way.
You can also configure the battery entities as separate single signals with color set to custom and different shades of green.

Only downside: You won’t get a battery-sum in the tooltip, as they are now separate numbers.
Both will add to the while positive and negative sums in case you use this option, though.

[Thyraz]

Just uploaded a new release (version 0.5.0) that supports solar forecasts (dashed white lines in these examples):

I wasn’t aware that there is no way to get the solar forecast as hourly values in HA normally.
There are no entities / attributes that would be available in the standard for this (even that some providers added attributes in their implementation).
I found quite some threads with workarounds using Node-RED, a WTH post, feature request and Github issues about that.

So the only way to get these values as of today is a websocket call to energy/solar_forecast.
And it only returns values for forecasts that have been applied to a pv source in the energy dashboad settings.
Other solar forecast devices in your setup can’t be added to charts because of this.

So if you want to use this, ensure you added the forecast to your energy dashboard pv settings:

Then you should be able to add the forecast in the card editor.
If you have multiple PV sources (each with a forecast applied) in the energy dashboard settings, you can also choose to use only one of these as source for the signal.
Otherwise simply choose “All forecasts”: