Lovelace: mini graph card

Any tips on how to get this graph right


The last bar is too low compared to the one to the left. I assume it’s because it’s using that bar as lowest point (hence the 4.41 value on the left’

I made a template to combine current tariff1 and tariff2 value of today.

#Combine Energy peak/offpeak
  - platform: template
        friendly_name: 'Daily Energy Peak/Offpeak Total'
          - sensor.daily_energy_offpeak
          - sensor.daily_energy_peak
        value_template: "{{ (states('sensor.daily_energy_peak')|float + states('sensor.daily_energy_offpeak')|float)|round(3) }}"
        unit_of_measurement: "kWh"
        friendly_name: 'Monthly Energy Peak/Offpeak Total'
          - sensor.monthly_energy_peak
          - sensor.monthly_energy_offpeak
        value_template: "{{ (states('sensor.monthly_energy_peak')|float + states('sensor.monthly_energy_offpeak')|float)|round(3) }}"
        unit_of_measurement: "kWh"

type: 'custom:mini-graph-card'
  - entity: sensor.daily_energy_power_total
name: Energy consumption (Weekly)
hours_to_show: 168
aggregate_func: max
group_by: date
  graph: bar

How often is your sensor updated?

My sensor.daily_energy_power_total updates every few seconds whenever there is a change.

The day has passed and now yesterdays bar has increased a lot now. Am I correct to say that the current day(bar) doesn’t grow over the day but gets populated when the day has passed?

As far as I understood, the "group_by" feature works like this (@kalkih please correct me):

  1. There is an array of values of some sensor (updated every XXX seconds/minutes).
  2. A usual LINE graph shows a curve reflecting every value (+ some interpolation dependingly on "scan_interval" & "points_per_hour" & "hours_to_show").
  3. Grouping per hour: for every hour an “Arithmetic mean” is calculated (sum of values within this hour / number of values). This calculated value then is displayed in the graph as a value for this particular hour.

To investigate any strange behaviour with "group_by" I recommend you not to use grouping first; then if everything looks fine - use "group_by".

1 Like

I am working on electrical energy monitoring with a combination of the Riemann sun integration, the utility meter integration and the mini graph custom cards. I get my energy readings through Smappee energy monitor.

All works pretty smooth within the range of a week. In the bar charts data per hour is fine and grouped per hour or date works perfectly. However once you go beyond that range problems start.

Could the hours_to_show changed to time_to_show with a selection of hours, day, week, month, year (like the utility meter also counts the data).

And the same for grouped_by not only hour or date but calendar_week, calendar_month or calendar_year?

There is the option for interval but I couldn’t find any description on how to use that.

I read quite some threads facing similar issues. I think it would create great flexibility.

Finally I like to say I like the cards a lot. I don’t understand why this is not replacing the standard history graph in Lovelace!

For deep serious analysis some people prefer to use a software like Grafana with it’s rich tools.

I have tried that too but I found it too complicated and I couldnt get it going unfortunately.

Note that by default the database is purged every 24 days. Probably the default DB engine is not good for longer periods

24 days in itself is enough. I would aggregate the data like its done in the utility meter.

Since we are talking… Do you know how the grouped_by: interval works. I can’t find any example.

1 Like

My mistake. By default DB is purged every night and keeps data for 10 days.

Would you mind sharing your configuration for this? I like the look.

I believe I’ve just recreated it:



- platform: template
    # To recreate default HA climate card
      friendly_name: Heating status
      device_class: temperature
      value_template: >-
        {% if states('sensor.toon_room_temp')|float < states('sensor.toon_room_temp_setpoint')|float %}
          {{ states('sensor.toon_room_temp') }}
        {% else %}
        {% endif %}


  - sensor.toon_room_temp
  - entity: sensor.heating_from_temp
    color: green
    show_line: false
    show_points: false
    show_legend: false
    smoothing: false
  - entity: sensor.toon_room_temp_setpoint
    color: '#039BE5'
    show_legend: false
    show_state: true
    smoothing: false
    show_fill: false
font_size: 75
name: Keuken
lower_bound: 17
hours_to_show: 4
line_width: 3
points_per_hour: 60
type: 'custom:mini-graph-card'
  extrema: true
  average: true
  state: true
  - color: '#039BE5'
    value: 15
  - color: '#0da035'
    value: 17
  - color: '#e0b400'
    value: 19
  - color: '#e45e65'
    value: 21

edit: make float in temperature comparison, otherwise it compares the length of the string.


Is it possible to change the time of day that the group_by: Date data resets

The reason being i’m pulling data from a weather sensor that shows rainfall since 9am, and it seems to display funny as a result

Hi All,
I am getting the same error as OP:

Cannot read property 'length' of undefined
type: 'custom:mini-graph-card'

No matter how many times I do a clean install of HACS, i still get this error. Same thing is happening for the mini media player card, however other cards that I installed through HACS are running fine.

Anyone has any solution? I am pulling my hair out!

1 Like

Hi All,
I installed with HACS, but I can’t see the mini graph card in lovelace… Am I wrong anything?

How do you expect to “see” the ‘mini-graph-card’ in Lovelace?
If you mean “It is not available for selection in the ‘Create new card’ window” - this is normal for ALL custom cards.
Just create a new card (it can be of ANY type) and type a new code starting with “type: ‘custom:mini-graph-card’” etc.

Understood, thanks. I have to type a new code and works… Sorry I’m a newbie

I hope someone can help me with my problem :slight_smile:

I am creating a dashboard with Sqare buttons, and would love to have a graph with temperature in some of them. But I am facing a problem where the graph itself is using very little space on the card.
I have played with the height parameter, however this is an absolute value, and from device to device it requires different values.

Is there a way to use some relative value?

This is my card:

And this is my config (please note that this is inside a grid card:

            - align_state: left
              hours_to_show: 6
              points_per_hour: 12            
              decimals: 1
                - entity: sensor.temperature_sala
                  name: Livingroom
                  unit: °C
              #height: 334
              #font_size: 60
              #lower_bound_secondary: 0
              line_width: 5
                extrema: false
                fill: fade
                icon: true
                labels: false
                #labels_secondary: false
                name: true
              type: 'custom:mini-graph-card'

BTW, the latest release brings the possibility to select the card from GUI:


Can anyone help me as to why this graph is sowing as a line graph and not a bar chart? Am I missing something obvious?

        - type: custom:mini-graph-card
            - entity: sensor.daily_energy
              name: Daily Electricity
                graph: bar
                labels: true
                labels_secondary: true