Lovelace: mini graph card

find it here

1 Like

Now I understand :smile:
Thank you and have a nice evening

1 Like

Add state: false.

- type: custom:mini-graph-card
            entities:
              - sensor.datchik_temperatury_na_pervom_etazhe_temperature
              - sensor.datchik_temperatury_na_vtorom_etazhe_temperature
              - sensor.datchik_temperatury_v_vannoi_temperature  
              - sensor.datchik_temperatury_v_prikhozhei_temperature
            hours_to_show: 24
            points_per_hour: 2
            line_width: 1
            hour24: true
            animate: true
            height: 80
            show:
              extrema: false
              icon: false
              name: false
              legend: false
              state: false

What do you mean by

?

1 Like

Would you mind sharing your code?
For the card as well as the change you did to the theme.

I’m assuming you’re using Leon’s theme.
I too would like to use that style on my mini-graph-cards.

So that each line of the graph has its own name.

Hi, I’ve got 2 problems with these parameters:

color: var(--white); → it ignores white but accepts any other color (red, green, pink, etc).
Instead of white, it’s grey-ish.

font-family: 'Roboto', sans-serif !important; → also not being applied to the card.

Here the complete code:

type: custom:mini-graph-card
entities:
  - sensor.temperature
name: test
hours_to_show: 24
points_per_hour: 1.5
decimals: 1
hour24: true
line_width: 3
show:
  icon: false
  labels: false
  points: false
  fill: fade
card_mod:
  style: |
    ha-card {
      font-family: 'Roboto', sans-serif !important;
      }
      
    .header.flex .name.flex {
        font-size: 12px;
        line-height: 18px;
        background: var(--black);
        color: var(--white);
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 1;}

    .states.flex {
      margin-top: 0;
      padding: 2px 24px 0 24px;
      order: 1;}

    .graph hui-graph-header-footer {
      order: 3;}

    .header.flex {
      padding: 0 24px;
      order: 2;
      margin: 4px 0 -16px 0;
      z-index: 1;}

Dashboard is using this theme: Rounded

Any help appreciated.

--white isn’t a colour. It’s a variable (which may or may not be define and have the value white or an RGB or other format value). Where did you find this? I don’t think HA or the card defines this variable. Just try color: white.

Even if I use color: white; it’s still grey-ish.

The variable is defined in the theme.

Perhaps then there’s an alpha layer or opacity set somewhere. For example, an opacity of 50% will make white look grey. You’ll need to inspect the elements.

Yes, thank you!
This element had an opacity setting.
Changed it to 1.

.header.flex .ellipsis {
        opacity: 1;}

Do you have any input about the font-family?

1 Like

Glad the one issue is solved.

Nothing immediately comes up regarding the font. I’ll think more. Those fonts should be standard, but have you tried others like good ol’ Arial?

I didn’t see this in the 5 years of comments so forgive me if I missed it. :laughing:

Is there a way to have this value of the card show the sum of all the items?

Create a template sensor, add it as the 1st sensor and switch off showing it’s graph, show only its state, and do not show states of other sensors.

2 Likes

Worked perfect, thank you for the suggestion.

I’m also interested in doing this - any tips on how to make this work? Thanks!

Place the mini-graph-card inside config-template-card (CTC) & define ANY option dynamically by using JS templates. But using the card inside CTC may have side effects.

1 Like

i posted this in reply to a thread for having a zero line for solar generation vs battery consumption.
it was suggested i post it here…so here it is for anyone that needs it, 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)}}

I just add this in my cards:

      - entity: sensor.zero   # zero sensor included in Recorder
        name: ' '
        color: red            # or whatever
        show_state: false
        show_indicator: false
        show_graph: true
        show_line: true
        show_fill: false
        show_points: false
        show_legend: false
        state_adaptive_color: false
        fixed_value: true
        aggregate_func: min
1 Like

Hello, someone can give me the name of this color (red and blue) this is not red and not blue :

image

Thanks you

The ‘red’ looks like salmon and the ‘blue’ looks like dodgerblue