Lovelace: mini graph card

Not really, closest you could do is 30 day basis I guess, hours_to_show = 1 / (24 * 30) = 0,001388888888889.
Data points would be calculated from the current date so not grouped by month.

Can’t reproduce that one, do you have an example config?

I’d like to bring up one of my earlier posts here to see if anything has changed:

Essentially, I’m graphing my net energy usage, which can be both positive and negative (solar), and there are a couple of issues that I’ve found with the presentation of that kind of data.

First, there’s no clear way to denote zero, which I’ve sorta solved by using a separate data series that always returns zero, and the second is that the fill always starts from the bottom of the graph. I would like to see it fill from zero to the value, positive or negative, with the fill following the line color (green for negative, red for positive).

Is there a way to solve either issue, or should I file them as feature requests in github?

None of those features are available and I don’t think they will ever be in this project, I would recommend you to look for a more mature/advanced graph solution such as Grafana.

Looking at your prev posted pic of the graph, I would recommend setting a fixed lower and upper bound, so 0 always stays in the center of the graph, use color thresholds to make the line switch color depending on > 0 or < 0.

I’m actually doing that already, even though it’s not obvious from the graph. I have the line changing color from green to red at zero and I’ve set upper and lower bounds to put the center at zero, and that works fine. I just have to add another “fake” series fixed at zero to add the (purely aesthetic) zero-line and fill doesn’t work as I’d expect. It’s really very close to what I’d like to see, and “zero-aware fill” is the only part that I can’t address. It’s not critical and I’ve just disabled fill for now, but I’m hoping that there are kindred souls who are looking for something similar.

Thanks for the value, I’ll give it a try.

For the config is the same I provided before:

                  - type: custom:mini-graph-card
                    name: Temperature
                    icon: "${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ? 'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }"
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 168
                    points_per_hour: 0.25
                    aggregate_func: max
                    group_by: hour
                    group: false
                    hour24: true
#                    animate: false
                    decimals: 1
                    font_size: 100
                    font_size_header: 14
                    align_header: default
                    align_icon: right
                    align_state: center
                    lower_bound: -5
                    upper_bound: 40
                      name: true
                      icon: true
                      state: true
                      graph: line
                      fill: false
                      points: false
                      legend: false
                      extrema: false
                      labels: false
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      - value: 5
                        color: "#0055FF"
                      - value: 15
                        color: "#FF6600"
                      - value: 20
                        color: "#FFAA00"
                      - value: 22.5
                        color: "#FF7700"
                      - value: 25
                        color: "#FF3700"
                    style: |
                      ha-card {
                        padding: 16px !important;
#                      ha-icon {
#                        color: [[ if(vars[0] >= 30, "rgb(255, 0, 0);", if(vars[0] >= 22, "rgb(255, 153, 0);", if(vars[0] >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
#                      }
                      - entity: sensor.house_temperature
                        name: House
                        color: '#FF5000'
                        show_state: true
                      - entity: sensor.dark_sky_temperature
                        name: Outside
                        color: '#0099CC'
                        show_state: true
                      - entity: input_number.night_time
                        color: '#FFFFFF'
                        name: Night Time
                        smoothing: false
                        show_fill: true
                        show_line: false
                        show_points: false
                        show_legend: false
                        show_state: false
                        y_axis: secondary

As as I set fill to true it works:

It might be possible to achieve with some css transforms, custom bounds and possibly template sensors, here’s a quite interesting graph I came up with recently with the help of card-mod and some custom bounds:

Note, center is 4 in the screenshot and not 0


- type: custom:mini-graph-card
  name: Energy
  hours_to_show: 168
  smoothing: false
  line_width: 2
    - entity:
      name: Production
      color: "#27ae60"
    - entity: sensor.consump
      y_axis: secondary
      name: Consumption
      color: "#e74c3c"
    labels: true
    labels_secondary: true
    icon_adaptive_color: true
  lower_bound_secondary: -6
  lower_bound: -6
  upper_bound_secondary: 14
  upper_bound: 14
  hours_to_show: 168
  style: |
    .graph__labels.--secondary .label--max {
      order: 5;
    .line--points {
      height: 50%;
    g .line--rect:last-of-type,
    g .fill--rect:nth-of-type(2),
    svg > g:last-child {
      transform: scale(1, -1);
      transform-origin: center;

That looks amazing :slight_smile:

That’s really cool! I’ll play around it.

I’m also playing with Influx/Grafana and it looks like a) Grafana integration into Lovelace seems a bit hacky with iframes and b) it doesn’t work at all with Ingress through Nabu Casa. Something native would be a better solution for me on my main Lovelace view.

Here’s a better example of what I have now:

Oh, I see what you mean now, yeah that’s true, in fact all entity options that are show_* works that way, you can’t enable them if they are disabled in the base, you can only do the other way around, disable them if they are enabled in the base. That’s probably also why the option descriptions are Set to false to hide the *.

(With enabled/disabled I refer to true/false)

Would require some work to change this, not sure if it will happen, you can kinda achieve the wanted style in other ways (card-mod).

So I should put fill true on “show” and in each entity put show_fill to false except the night_time one?

That would be the way to go yes, and if you want the other effect of fill: false (the padding) add it with card-mod.

Hi Kalkih,

Is there any way to see the time and temperature scale as in History Graph Card?
If not, there is the possibility to implement that?

thanks in advance…

No, that’s not possible right now.
Yes, It could be implemented, there’s an open feature request for it on github #21.

1 Like

Not sure what is going on here:

aggregate_func: max
  - color: '#039BE5'
    value: 0
  - color: '#0da035'
    value: 5
  - color: '#e0b400'
    value: 7.5
  - color: '#e45e65'
    value: 10
  - entity: sensor.total_cost_today
group_by: date
hours_to_show: 168
name: Energy Cost Per Day
  graph: bar
  labels: true
style: |
  ha-card {
    border: solid 2px var(--primary-color);
type: 'custom:mini-graph-card'

The last two days are incorrect. For example yesterday is showning $3.79 when it was actually $5.64




I have two graphs in my diagram and I would like to have different line_width for each of them.
Is this possible?

When I’m trying the line_width option it applies to both the lines…

Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.

Otherwise, possibly related to #193

No that’s not possible, as you noticed, it applies to all entities and I don’t think this will change, line_width is used in various places for the rendering and computation of the graph, to determine margins/padding etc.

Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.

Otherwise, possibly related to #193

Yep I’m up to date. It’s happening when not hovering too.

It’s strange, this morning when I checked the values were correct. Now they are not correct again.

EDIT: it seems to be some sort of caching problem. Forced cache refresh (Ctrl+Shift+R or Ctrl+F5) does not help but opening a private browsing window does show the graph correctly. Also the iOS app (beta 2.0) always shows the correct graph.

I understand that this lovelace works with sensor entities. Is it possible to work with climate entities? I have Air Conditioning Units that have temperature sensors and I would like to use this graphs to show history of current temperatures.

Yes, create a template sensor for each attribute you want to graph.

Soon HACS will be able to tell you if you don’t have a installed plugin added your Lovelace configuration.

The reason for that change was that I figured it was not fear to the developer to rewrite the name of the plugin…

1 Like