Combine Energy Charts into a single table

[callumw]

We recently got smart meters which allows us to monitor both gas and electric use.
Until now I only had a Frient sensor monitoring the electricity use (great wee sensor), but now we have gas readings I noticed that we now have a loads of empty space in the energy dashboard.

We use gas for central heating and hot water only, so in the summer our gas use is minimal. This leaves us with a lot of nothing being reported.

Combining the charts into a single instance (as long as they share consumption type) would reduce the blank area.

e.g.
Currently we see this:

What would be better (imo) is this kind of formatting

or this

[callumw]

For now we’re using HACS card-mod to move the 2nd card up to force the cards to overlay.

Left side measurement is messy now they overlay, but we’re we’re more interested in the trend than the actual values as we get that detail from the energy-devices-graph.

Moving the card up:

type: energy-gas-graph
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      background: rgba(0,0,0,0);
      margin: -440px 0px 0px 0px;
    }