Lovelace: mini graph card

Thanks for the suggests!
I’ll try them

Thank YOU!
I will save your post as a prove that I can speak Italian too ))


could you share your config please?

Thanks in advance!


  - sensor.pi_hole_dns_queries_today
font_size: 85
icon: mdi:magnify
line_color: green
line_width: 1
points_per_hour: 2.5
  average: true
  extrema: true
  graph: bar
name: DNS Queries Today
type: custom:mini-graph-card

1 Like

Very nice card!
Can you share the code?


Question, is it possible to show also the min/max/avrg of the second entity?


1 Like

Here you go…

type: custom:mini-graph-card
name: Woonkamer
align_icon: left
align_header: left
  extrema: true
  average: true
  - entity: sensor.woonkamer_temperature
  - entity: sensor.woonkamer_humidity
    show_graph: false
    show_state: true
  - entity: sensor.woonkamer_battery
    show_graph: false
    show_state: true
  - color: gray
    entity: sensor.nightstate
    name: Night
    show_legend: false
    show_line: false
    show_points: false
    y_axis: secondary

How to nicely align legend’s elements:

Here is a case:
– 5 graphs are displayed on a card;
– 3 sensors have names like “xxxxx 1…3”, 2 sensors have names like “yyyyy 1…2”;
– alternatively: 3 sensors represent a “temperature”, 2 sensors - a “pressure”.

Dependingly on names’ length & the card’s width, a legend may look lake this:
or like this:
where sensors are “mixed” in the “Legend”.
But this may be changed to this aligned view:

type: custom:mini-graph-card
  - entity: sensor.rb260gs_0_snmp_uptime
    name: RB260GS_0
  - entity: sensor.rb260gs_1_snmp_uptime
    name: RB260GS_1
  - entity: sensor.rb260gs_2_snmp_uptime
    name: RB260GS_3
  - entity: sensor.ac68u_snmp_uptime
    name: router 1
  - entity: sensor.ac66u_snmp_uptime
    name: router 2
  name: false
  icon: false
  state: false
  style: |
    .graph__legend__item {
      flex-basis: 25%;
      justify-content: center

Note: the value “25%” may differ dependingly on names’ length, the card’s width, number of sensors - so experiment.

In the example above the 1st “group of sensors” contain more sensors than the 2nd “group” - so it is safe to apply the style to ALL legend’s elements; otherwise it is required to apply the style to PARTICULAR legend’s elements:

      style: |
        .graph__legend__item:nth-child(-n+2) {
          flex-basis: 40%;
          justify-content: center


1 Like

Isn’t there any support for hold_action on the mini graph card? I would like to be able to tap to navigate but hold to show more details about the entity.

How do I change the color of the title and icon for this card, and can i adjust the icon size?

use card-mod

/config/www didn’t exist so I created it and downloaded the JS into it. Added the resource in the config yaml, rebooted and nothing. Is this process up to date?

If you mean “how to install mini-graph-card” - I myself suggest using HACS.

HACS makes it easy to install however it still fails to show when adding the card with error:

Custom element doesn’t exist: mini-graph-card.

I can see it in the settings > dashboard though which is odd.

I cannot help, unfortunately.
For 2 years a have never faced a problem like “Custom element doesn’t exist: xxxx” with any of my cards…
Using HA in Docker, if it matters.
HACS is installed.

Is it possible to use color_thresholds per entity and not for the entire card?
I mean, two entities with different color_thresholds schemes.

I’ve been trying to do so but doesn’t seem to work

1 Like
  1. There is a FR for this on GitHub, you may start monitoring it.
  2. IMHO displaying 2 graphs with thresholds may not be a good idea, to many overlapping colors. But in some cases it may be appropriate - like “CO2 graph with thresholds + background day/night graph”.
1 Like

Mini graph doesn’t follow locale settings in HA and its annoying
Screenshot 2022-12-11 at 13.21.14

even my settings are like follow
What am I doing wrong?

my card is here:

type: custom:mini-graph-card
  - entity: sensor.plug_washingmachine_power
  - entity: sensor.plug_washingmachine_energy
    show_graph: false
    show_state: true
points_per_hour: 4
  labels: false
  labels_secondary: false
  name: true
  graph: bar
align_state: left
align_header: left
align_icon: left
name: Washing machine
icon: mdi:washing-machine
icon_adaptive_color: true
hour24: true
font_size: 60
hours_to_show: 6
  - value: 1
    color: cyan
  - value: 2
    color: orange

hi @typxxi I am searching here in this topic and also at Apex-charts topic for a simple question:
can we graph a 12 month bar chart for e.g. the energy production/consumption?

But please: I don’t need to aggregate, summarize the data anyhow (no “aggregate-by xxx” function needed), since I already have all the data in the XML and I can read them. The only question is how to show them in the graph - e.g. via the data generator?

the XML looks like this:

- <stat_year>

and I am able to address the nests via a multiscrape function and get all 4 data rows
1- house own consumption from solar panels,
2- total photovoltaic production,
3- grid consumption high tarrif and
4. grid cons. low tarrif

these 4 data series are all I need (I guess) to calculate and get some reasonable results for all graphs.

but the question remains: How do i plot the graph (minigraph, apexcharts …) if I have 4 data monthly series ?? (On the X-axis I want just to have: Jan, Feb, Mar, … etc)

So far didnt find anything resonable, just the links to grafana or some other more sophisticated tools, what I guess are not necessary for just showing 12 bar charts?
Somebody help please :slight_smile:

i’d love to see your yaml for this