Bar with negative values

[t-dan]

Hi,
I want to show a bar graph with energy production/consumption, where I the sensor with energy consumed from grid is represented by negative values. This means that for every day there are several bars with a positive value and one with a negative value.

Is there a way of "pointing" the value downside (from a "zero", where a positive value bars start)?
I know that I can revert the value, but I would like to have is displayed up side down for better overview.

Thank you very much,
D.

[DeFlanko]

i hope this helps -- i wanted "negative" values for upload speed -- Ended up using card_mod:

type: custom:mini-graph-card
show:
  labels: true
  labels_secondary: true
  name_adaptive_color: true
  icon_adaptive_color: true
  average: true
  extrema: true
height: 200
hours_to_show: 1
points_per_hour: 360
line_width: 2
animate: true
lower_bound: 0
lower_bound_secondary: 0
color_thresholds:
  - value: 500
    color: '#8FCE00'
  - value: 40
    color: '#008fce'
  - value: 5
    color: '#ce008f'
  - value: 0
    color: '#000000'
color_threshold_secondary:
  - value: 40
    color: '#008fce'
  - value: 5
    color: '#8FCE00'
  - value: 0
    color: '#000000'
entities:
  - entity: sensor.pfsense_download_mbps_speed
    unit: Mbit/s
    name: Download (top)
  - entity: sensor.pfsense_upload_mbps_speed
    unit: Mbit/s
    name: Upload (bottom)
    y_axis: secondary
    show_state: true
name: Active Internet (Last 15 mins)
card_mod:
  style: |
    .line--rect,
    .fill--rect,
    .line--points {
      transform: scaleY(50%);
    }
    rect.fill--rect:nth-of-type(1) {
      outline: 1px solid var(--secondary-text-color);
    }
    rect.fill--rect:nth-of-type(2),
    rect.line--rect:last-of-type,
    .line--points:last-of-type {
      transform-origin: center center;
      transform: rotateX(180deg) scaleY(50%) translateY(-100px);
    }
    .graph__labels.--secondary {
      flex-direction: column-reverse;
    }
    .graph__container__svg {
      margin-bottom: 16px;
    }

references: https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/1936?u=ildar_gabdullin

[ildar170975]

@DeFlanko
I would suggest you to provide a link to an original post where you took this mod from

• for consistency
• for credit
• for give a link to a source which may change.

Here is a source link which you should had provided:
https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/1936?u=ildar_gabdullin

[DeFlanko]

Thanks! i was looking for that!

[ildar170975]

Ofc this is merely a workaround with limitations like:

• portability: in Safari a horizontal X-axis line cannot be shown (at least in iOS 15.x); also in Safari - “fade” fill will cause glitches; etc…
• usability: Y-axis labels are shown in a confusing way (for instance, for a primary entity - a “minimal” label is shown not below the X-axis;
• for bar graphs - the bottom graph needs to be shifted to the left!

But this is a possible alternative way we have now…

[t-dan]

I am, unfortunatelly, not familiar with CS styling, but the simple copy-paste of the proposed card_mod did not work.
Could you suggest a modification, please?

card_mod:
  style: |
    .line--rect,
    .fill--rect,
    .line--points {
      transform: scaleY(50%);
    }
    .line--rect:last-of-type,
    .fill--rect:nth-of-type(2),
    .line--points:last-of-type {
      transform-origin: center center;
      transform: rotateX(180deg) scaleY(50%) translateY(-150px);
    }
    .graph__labels.--secondary {
      flex-direction: column-reverse;
    }
    .graph__container__svg {
      margin-bottom: 20px 
    }

I need something requested in #630 (number 2.)
Thank you.