Fill only the space until the next visible line

[ishbuggy]

I am trying to make a good looking stacked area graph using mini-graph, but I am stuck on one point. I cannot see if there is any way to make the fill between lines not overlap and only fill to the next line? Right now all fill colors display on top of each other and with more than 3 or 4 entities it is nearly impossible to distinguish the fill color.

[ildar170975]

Try this: https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/1917?u=ildar_gabdullin

[ishbuggy]

Try this: https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/1917?u=ildar_gabdullin

That is close to what I want, but so far I can't get it to fill in the transparent color of the line above. I am probably not understanding how card-mod works though.

[ishbuggy]

I'm getting closer, but still it seems to be overlaying on top and not giving a clean color under each line.

My code is:

name: Power Usage (24h)
icon: mdi:lightning-bolt
entities:
  - entity: sensor.total_power_helper
    show_state: true
    show_graph: false
  - entity: sensor.powergraph01
    name: Network
    color: dodgerblue
  - entity: sensor.powergraph02
    name: Desk
    color: gold
  - entity: sensor.powergraph03
    name: TV
    color: turquoise
  - entity: sensor.powergraph04
    name: Fridge
    color: orange
  - entity: sensor.powergraph05
    name: Kitchen Water
    color: darkviolet
  - entity: sensor.powergraph06
    name: Kettle
    color: mediumseagreen
  - entity: sensor.powergraph07
    name: Dryer
    color: lightpink
  - entity: sensor.powergraph08
    name: Washing Machine
    color: sienna
  - entity: sensor.powergraph09
    name: Lighting
    color: skyblue
hours_to_show: 24
points_per_hour: 20
line_width: 1
lower_bound: 50
animate: true
logarithmic: true
show:
  icon: true
  state: true
  fill: true
  labels: true
card_mod:
  style: |
    .graph__item:nth-child(2) .fill {
      fill: #1e90ff;  # dodgerblue
    }
    .graph__item:nth-child(3) .fill {
      fill: #ffd700;  # gold
    }
    .graph__item:nth-child(4) .fill {
      fill: #40e0d0;  # turquoise
    }
    .graph__item:nth-child(5) .fill {
      fill: #ffa500;  # orange
    }
    .graph__item:nth-child(6) .fill {
      fill: #9400d3;  # darkviolet
    }
    .graph__item:nth-child(7) .fill {
      fill: #3cb371;  # mediumseagreen
    }
    .graph__item:nth-child(8) .fill {
      fill: #ffb6c1;  # lightpink
    }
    .graph__item:nth-child(9) .fill {
      fill: #a0522d;  # sienna
    }
    .graph__item:nth-child(10) .fill {
      fill: #87ceeb;  # skyblue
    }

[ildar170975]

Suggest you to discuss this kind of questions in the main thread in Community.
"Discussions" are for discussing the card, not for a user support.