How to add a 0-line in mini-graph-card

Configuration Frontend
1

I did create an graph with mini-graph-card. Showing my energy consumption.
It is working fine.
Because I do use solarpannels it can also be a negative value.
Now the graph shows no 0-line and the difference between negative and positive value is hard to see.
I like to add an x-as 0-line.
I’m not able o fix it:

          - cards:
              - entities:
                  - color: 'var(--dwains-theme-accent)'
                    entity: sensor.power_consumption_watt
                    name: Huidig energieverbruik (24h)
                font_size: 80
                hours_to_show: 24
                line_width: 2
                hour24: true
                points_per_hour: 2
                decimals: 0
                show:
                  animate: true
                  fill: true
                  icon: false
                  labels: false
                  name: false
                  graph: line
                  extrema: true
                  average: true
                theme: ios-dark-mode-blue-red
                type: 'custom:mini-graph-card'

my current graph:
image
Any advice?

1 Like
2

imo the only way is to create another sensor with value 0 and add it to the graph.

Optionally you can use ApexCharts from the same author. which will allow you to achieve what you need without creating the sensor

3

Exactly. I was thinking the same.
But I’m not able to add the extra sensor
giving error.
Any code advice?
(I’m not very good in coding)
Lets say there is a sensor.zero

EDIT:

I did found the solution:

              - entities:
                  - color: 'var(--dwains-theme-accent)'
                    entity: sensor.power_consumption_watt
                    name: Huidig energieverbruik (24h)
                    show_fill: true
                  - entity: sensor.zero
                    color: green
                    show_fill: false
                font_size: 80
                hours_to_show: 24
                line_width: 2
                hour24: true
                points_per_hour: 2
                decimals: 0
                show:
                  animate: true
#                  fill: true
                  icon: false
                  labels: false
                  legend: false
                  name: false
                  graph: line
                  extrema: true
                  average: true
                theme: ios-dark-mode-blue-red
                type: 'custom:mini-graph-card'
            type: horizontal-stack

image

4

Sorry but i’am new to programming. Could you tell me how to make the 0-line sensor? Could you share the yaml-code so i can do the same in my graphs? Thanks!

5

For code see reply above

6

A real simple way is to go to helpers (settings/ devices and services/ hellpers)

Create a helper: “number”, name ‘zero’ say
(Set min zero and max 1 say)
Open the help and on the info page check its value is zero

you can now use it as ‘input_number.zero’

3 Likes
7

and set it as hidden, so you’ll not even know it’s there

8

to help a little here, this is how i did it.

i created a template sensor in configuration.yaml

template:          
  - sensor:
      - name: zero
        unique_id:  zero
        state: 0

here is my card config for the mini-graph-card

      - type: custom:mini-graph-card
        name: I/O Power
        entities:
          - entity: sensor.greenhousev2_consumption_watts
          - entity: sensor.zero
            color: rgba(200,200,200,0.2)
            show_fill: false
            show_line: true
            show_points: false
            show_legend: false
            line_width: 1
          - color: '#ACACAC'
            entity: sun.sun
            name: Sun
            show_line: false
            show_points: false
            show_legend: false
            y_axis: secondary
        decimals: 2
        unit: watts
        line_color: '#e74c3c'
        line_width: 3
        font_size: 77
        hours_to_show: 24
        points_per_hour: 4
        upper_bound: 4
        lower_bound: -4
        aggregate_func: avg
        show:
          extrema: true
          legend: false
          labels: false
          state: true
          graph: line
          fill: true
        color_thresholds_transition: hard
        color_thresholds:
          - value: -4
            color: '#e51f1f'
          - value: -0.98
            color: '#f2a134'
          - value: 0
            color: '#44ce1b'
        state_map:
          - value: above_horizon
            label: Day
          - value: below_horizon
            label: Night

note that i used rgba because i wanted the opacity variable so i set it 0.2, i thought i looked nicer.
the extra addition is the grey block which represents nighttime from sun.sun
my orange section is what i define as normal consumption so i can see when im power positive or not
image

for my watt consumption vs generation this is my configuration.yaml code

  - platform: template
    sensors:
      greenhousev2_consumption_amps:
        friendly_name: 'Consumption Amps'
        device_class: current
        value_template: >-
            {% set b = (states.sensor.greenhousev2_ina219_1_current.state | default(0) ) | float(2) %}
            {% set s = (states.sensor.greenhousev2_ina219_2_current.state | default(0) ) | float(2) %}
            {{ (s-b) | round(2)}}
      greenhousev2_consumption_watts:
        friendly_name: 'Consumption Watts'
        device_class: power
        value_template: >-
            {% set b = (states.sensor.greenhousev2_ina219_1_power.state | default(0) ) | float(2) %}
            {% set s = (states.sensor.greenhousev2_ina219_2_power.state | default(0) ) | float(2) %}
            {{ (s-b) | round(2)}}
9

Suggest to post similar things in the dedicated mini-graph-card thread, let’s have it in one place.

10

updated in there also

1 Like
11

This is a great solution! Thank you!