Lovelace: mini graph card

Hope · January 22, 2024, 3:23pm

I have a night state sensor called “time_bound”:

sensor Time_Bound:
  platform: template
  sensors:
    time_bound:
      friendly_name: "Time Bound"
      icon_template: mdi:power-sleep
      value_template: >
        {{ iif(is_state('sun.sun', 'below_horizon'), -5, 40) | int(0) }}

Then in mini-graph-card, this sensor and the temperature are sharing the primary axis, but the humidity is on the secondary axis:

decl_temp_humi:
  default:
    - TEMP_ID: sensor.ta1_au_temperature
    - HUMI_ID: sensor.ta1_au_humidity
    - POS_TOP: 11%
    - POS_LEFT: 33%
  element:
    type: custom:mini-graph-card
    entities:
      - entity: "[[TEMP_ID]]"
        show_state: true
        show_fill: false
        state_adaptive_color: true
      - entity: "[[HUMI_ID]]"
        color: LightBlue
        show_state: true
        show_fill: false
        state_adaptive_color: true
        y_axis: secondary
      - entity: sensor.time_bound
        color: Cyan
        show_state: false
        show_line: false
        show_points: false
    color_thresholds:
      - value: -15
        color: "#00FFFF" # Cyan
      - value: 3
        color: "#00FF00" # Lime
      - value: 18
        color: "#FFD700" # Gold
    color_thresholds_transition: hard
    group: true
    hours_to_show: 24
    hour24: true
    points_per_hour: 1
    lower_bound: -5
    upper_bound: 40
    lower_bound_secondary: 20
    upper_bound_secondary: 99
    show:
      name: false
      icon: false
      legend: false
      labels: false
      labels_secondary: false
    font_size: 44
    height: 300
    line_width: 5
    style:
      top: "[[POS_TOP]]"
      left: "[[POS_LEFT]]"
      border: 2px dotted Navy
    card_mod:
      style: |
        ha-card {
          width: 115px;
          background: none;
          --ha-card-border-radius: 0px;
        }
        ha-card .flex {
          padding: 0px 0px 0px 0px;
        }

with this result:

larryo108 · January 23, 2024, 6:01pm

I am wondering if someone can help with my styling. I am trying to change the color of the sun phase state map based on the state of my HVAC. If the HVAC is on, I would like to utilize my theme colors (black on white in dark mode and white on black in light mode), but if the HVAC is off, I would like to use an orange fill color. I cannot get it to work though. Here is my code.

type: custom:mini-graph-card
entities:
  - entity: sensor.inside_temperature
    name: Inside
    color: '#3182b7'
    show_fill: false
  - entity: sensor.steiger_temperature_feels_like
    name: Real Feel
    color: '#32a852'
    show_fill: false
  - entity: sensor.steiger_temperature
    name: Outside
    color: 'rgb(255,0,0)'
    show_fill: false
  - entity: sensor.hass108_sun_phase
    color: >
      [[[
        if states['climate.living_ecobee_app'].state == 'heat_cool'
            ? 'var(--contrast1)'
            : '#ff5f00';
      ]]]
    name: Sun
    show_legend: false
    show_line: false
    show_fill: true
    show_points: false
    y_axis: secondary
line_width: 1
decimals: 0
hour24: true
hours_to_show: 48
state_map:
  - value: night
    label: Night
  - value: day
    label: Day
show:
  name: false
  state: false
  points: false
  icon: false
  extrema: false
  labels: false
  labels_secondary: false
card_mod:
  style: |
    ha-card {
      --ha-card-background: {{ 'var(--contrast20)' if is_state('climate.living_ecobee_app', 'heat_cool') else 'rgba(115, 115, 115, 0.25)' }};
      --primary-text-color: {{ 'var(--contrast1)' if is_state('climate.living_ecobee_app', 'heat_cool') else '#97989c' }};
      border-radius: 10px;
      border: none;
    }
    .graph__legend__item:nth-of-type(1) .ellipsis:after {
      content: ": {{states('sensor.inside_temperature')}}°F";
      color: {{ 'var(--contrast1)' if is_state('climate.living_ecobee_app', 'heat_cool') else '#97989c' }};
    }
    .graph__legend__item:nth-of-type(2) .ellipsis:after {
      content: ": {{states('sensor.steiger_temperature_feels_like') }}°F";
      color: {{ 'var(--contrast1)' if is_state('climate.living_ecobee_app', 'heat_cool') else '#97989c' }};
    }
    .graph__legend__item:nth-of-type(3) .ellipsis:after {
      content: ": {{states('sensor.steiger_temperature')}}°F";
      color: {{ 'var(--contrast1)' if is_state('climate.living_ecobee_app', 'heat_cool') else '#97989c' }};
    }
    .graph .graph__legend {
      font-size: 15px;
    }

The mini-graph card is within a stack-in-card with my HVAC controls and a forecast card.

I cannot get the color to be anything, but what is shown in the screenshot. Which disappears in light mode or when the HVAC is turned off.

garethiowc · January 25, 2024, 8:15pm

Would you mind sharing the ymal for this please

Shooter182 · January 28, 2024, 10:00am

Hey Guys,

it is possible to define the other font sizes and the gaps between?

type: todo-list
entity: todo.bring_todo_rezepte
card_mod:
  style: |
    ha-card {
      font-size: 25px;
    }
view_layout:
  grid-area: B1

yagi · February 8, 2024, 1:20pm

Is it possible to add a new feature - to display also a grid for the graph, something which is displayed in normal entity graph:

Ildar_Gabdullin · February 10, 2024, 5:41pm

If “Comparing” = graphs for different periods like “this week VS previous week” - then this is not possible.

Duckers · February 10, 2024, 5:43pm

comparisons would be for years. But if it’s unable to do that, Can it be setup to do a graph for “decades”?, then that can show at least that year’s power draw and cost vs last year.

Edit: Made a new post instead as i didn’t realize i posted request on someone else’s post.

Ildar_Gabdullin · February 10, 2024, 5:48pm

The card uses “hours_to_show” parameter to define a period from “Now” to “Now - hours_to_show” in the past. It is impossible to select periods like “last week” etc.
As for years - the default Recorder purge interval is 10 days, are you talking about increasing this interval to years?

RobertoCravallo · February 17, 2024, 4:24pm

Hi, really like the your design!! Are you willing to share the code please.

BigStephan · February 18, 2024, 12:48pm

Hello,

why is the font of the title in another font-type and font-color than the rest of the HA-cards…this looks terrible when all cards on the dashboard have the same title style but the graph-card not.

greetings

arzaman · February 18, 2024, 6:31pm

Hi,

Is there any way to expand a single card to “full screen”? I have a card with 6 sensors (and dual axes), and the standard card size is really small, making the plots appear messy. I see that you can set a custom height, but not width. I want to see the data at full size, like the historical data chart.
Any suggestions ?
thanks

parautenbach · February 18, 2024, 7:47pm

Make a view with just one card and make it a panel.

sdda · February 21, 2024, 10:17am

Guys, this one is hopefully an easy one
I would like to have the red graph in the background over the entire height and the temperature in the foreground “in” the graph. Unfortunately, I’m too bad at CSS for this.

Screenshot 2024-02-21 at 11.13.54

The current configuration:

          - type: custom:mini-graph-card
            entities:
              - entity: sensor.aqara_multisensor_wohnzimmer_temperature
                name: Wohnzimmer
            style: |
              ha-card {
                .states.flex {
                  font-weight: 450;
                }
              }
            hours_to_show: 48
            points_per_hour: 2
            show:
              labels: false
              icon: false
            line_width: 2
            points: false
            font_size: 100
            height: 35
            align_state: center
            color_thresholds:
              - value: 20
                color: '#f39c12'
              - value: 21
                color: '#d35400'
              - value: 21.5
                color: '#c0392b'

Thanks!
Sven

Christopher_Kegels · February 21, 2024, 9:04pm

hi did you ever find a solution to this? i would also like to do something similar or maybe just change the line colornwhen the state of the heating is/was on

Brendan4 · February 24, 2024, 2:45am

Hi, I am still a newbie.
How do I make this value the aggregate of all the values in the graph?

Thanks

DeckardCain2014 · February 26, 2024, 9:52am

Might be a stupid question, but is it normal for all my cards when hovering, only the lowest and highest datapoint is displayed, not the value of the current hovered bar / line point?

type: custom:mini-graph-card
entities:
  - entity: sensor.stromzahler_momentanverbrauch
show:
  graph: bar
  state: false
  points: true
hours_to_show: 24
points_per_hour: 1
update_interval: 60

Ildar_Gabdullin · February 26, 2024, 1:28pm

States are displayed for POINTS, not just curves. If you do not see a point when hovering - there is no point here.
Update: this for for line graph, but you are using bars… then do not understand the question.

DeckardCain2014 · February 26, 2024, 1:56pm

I would think on each bar there is a value (as high as the bar is drawn). However when hovering over, I cannot see the value.

Ildar_Gabdullin · February 26, 2024, 3:49pm

These are wrong terms, they are called “labels”.

Ofc since you disabled displaying a value by “state: false”.

Also, “points: true” has no sense for bars.

DeckardCain2014 · February 26, 2024, 4:13pm

Ok, this makes sense. However I just want to show the labels, not the live measurement value