Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
2809

found it! Lovelace: mini graph card - #2208 by SteffenDE

the point is you named it there imitating statstics card instead of mimic. Thank you very much and sorry

1 Like
2810

seems to be a wrong link


2811

How do I increase the font size for the Min and Max readings on these graph-cards?

The Min, 18.7C, and 02:50 on the Lounge card are inside a div.flex.info container so I tried card mod., but it didn’t work 


card-mod:
  style: |
    :div.flex.info { font-size:10px }

screenshot
screenshot560×285 11 KB

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    name: Lounge
    align_header: left
    align_icon: left
    font_size: 75
    entities:
      - entity: sensor.meter_plus_da53_lounge
      - entity: sensor.meter_plus_da53_humidity
        show_graph: false
        show_state: true
        show_points: false
    color_thresholds:
      - value: 20
        color: "#eb4d54"
      - value: 18
        color: "#1db954"
      - value: 16
        color: "#3a8df7"
    hours_to_show: 24
    hour24: true
    icon: mdi:sofa
    points_per_hour: 0.5
    show:
      extrema: true
      fill: fade        
  - type: custom:mini-graph-card
    name: Kitchen
    align_header: left
    align_icon: left
    font_size: 75
    entities:
      - entity: sensor.meter_plus_88d5_kitchen
      - entity: sensor.meter_plus_88d5_humidity
        show_graph: false
        show_state: true
        show_points: false
      - color: gray
        entity: sensor.nightstate
        name: Night
        show_legend: false
        show_line: false
        show_points: false
        y_axis: secondary
    color_thresholds:
      - value: 20
        color: "#eb4d54"
      - value: 18
        color: "#1db954"
      - value: 16
        color: "#3a8df7"
    hours_to_show: 24
    hour24: true
    icon: mdi:silverware-fork-knife
    points_per_hour: 0.5
    show:
      extrema: true
      fill: fade
2812

Already told you where to find this.
Copy-paste from your another thread:
“Some font adjustments can be done by native options of this card. Other adjustments can be done by card-mod: main card-mod thread - 1st post - “fantastic” link - mini-graph-card.”
On that post you will see a list of posts with examples for mini-graph-card.

2814

Why are you repeating yourself when I have visited here precisely because the GitHub “help” and other links, haven’t helped me. I wouldn’t ask if I had the answer.
Let someone else reply, there’s no need for you to get stressed and annoyed
I wouldn’t want you to feel that way​:grin::ok_hand:

2815

Because you keep not understanding explanations. Ok, not insisting anymore).
I have read your deleted comment).

2816

Something that has been asked many times in the requests section on github is the ability to dynamically change hours_to_show.

My dashboard became cluttered with conditional cards to show different timelines for each sensor using input_select helpers. A nightmare.

Well. I went ahead and asked Claude (3.7 Sonnet) to add that options to the code. I can now use an input_number, for instance, to control the graph timeline in real time.
It took me (us!) about 2 hours. I have absolutely no knowledge of JavaScript, Claude did all the work.

Here’s a working version:

Capture d’écran 2025-04-09 162825
Capture d’écran 2025-04-09 162825606×337 13.2 KB

Next, I’ll ask Claude to add templating to hours_to_show.

2817

Next time ask AI about “please give me a code as well, not just a picture”.

2818

I have seen code plenty today, don’t worry. I assure you it’s there.

If @kalkih is ok with it, I’ll share the. js file

2819

It looks really nice! Can you share your code, please?

2820

anyone here have any tips on getting the card to respect grid_options?

example here with:

grid_options:
  columns: 6
  rows: 2

image
image654×558 30.4 KB

Its supposed to align with the “Oppetid” card 


Adding this basically hides the graph


card_mod:
  style: |
    :host {
      height: 100%;
    }

image
image544×222 14.5 KB

2821

You are trying to squeeze a card into a small space.
So, set a bigger “rows” value (along with “100%” card-modding).
Or play with fonts.

2822

I am just trying and canÂŽt get a bar graph to show a bar per day, I am trying to make a graph showing my daily step count. I have read that utitlity meter works well but for power metering. Is there any option or helper to help me achieve what I want?

2824

hi guys, how can i scale the .graph horizontally without affecting the line thickness and also the original height?

1
1336×311 9.82 KB

type: custom:mini-graph-card
card_mod:
  style: |
    .graph {
      width: 50% !important; #<--------
      align-self: center !important;
      height: 100px !important;
    }
name: {{ name }}
entities:
  - entity: {{ entity }}
hours_to_show: 1
points_per_hour: 720
height: 100
line_width: 2
hour24: true
lower_bound: 0
upper_bound: {{ upper_bound }}
show:
  extrema: true
  fill: false
  points: hover
  labels: false
2825

I would start with padding-left: 10px !important; and padding-right: 10px !important; instead of widh, align and height. But I think it would be more a topic for the card-mod thread.

2826

Besides, please do not mix several custom plugins when asking a question, I mean lovelace_gen.

2827

Anyone else having issues with the card after updating to 2025.6? Github issue opened here but no resolution yet

2828

No issues here

2829

For those interested, here’s the modified version to use an input_number in hours_to_show instead of a static number.

The card is called Mini Graph Card (Dynamic) in Lovelace.

The only difference if your yaml code are these two lines:

type: custom:mini-graph-card-dynamic
hours_to_show: input_number.your_input_number

Download: mini-graph-card-dynamic.js
Installation: Follow mini-graph-card’s manual installation instructions but change the filename accordingly.

mini-graph-card-dynamic

@lsitges

5 Likes
2830

Wow, it looks great! I’ll try it as soon I have some time :slight_smile: