13 November 2021

Adding night shading to a Home Assistant mini-graph-card chart

Make your charts easier to read with a simple template and our example mini-graph-card configuration.

By In Make 4 min read

One of my favorite Lovelace interface cards for Home Assistant is the mini-graph-card by kalkih. It’s the card running most of the graphs in our smart home‘s dashboard. Surprisingly, mini-graph card is actually not included in Home Assistant by default – honestly, it should be, it’s so good – but you can easily install it using HACS. You can make both line and bar charts and customize them.

A recurring question that people ask when they see our charts is how we get the shaded areas that indicate nighttime. It’s quite a handy feature, especially for sensors where the readings are influenced by time of day or the sun. Our temperature sensor graphs, for example, became a lot clearer when you immediately see how the temperature changes as the night moves into day.

Horizontal stacks of temperature sensors in mini-graph-card cards in Home Assistant
Horizontal stacks of temperature sensors in mini-graph-card cards
Standard example showing night indicator shading in Home Assistant (source: mini-graph-card GitHub)
Standard example showing night indicator shading

The idea for the shaded night indicators wasn’t even my own, it’s a standard example from the mini-graph-card documentation. It’s just not explained very well in the documentation how to go from the example to actually implementing it in your Home Assistant installation.

The documentation does explain how to get the chart set up: you create a ‘fake’ secondary Y-axis with no line, points, or legend – just gray shading. To make this shading appear in our chart at the right times we simply need an entity that is set to 1 when it’s night and 0 when it’s day. Because no other data of this axis is shown, the night entity looks like gray shading overlaid onto our chart.

    - color: gray
      entity: input_number.nighttime
      name: Night
      show_line: false
      show_points: false
      show_legend: false
      y_axis: secondary

But what the mini-graph-card documentation does not explain is how to create the entity in Home Assistant that powers this night indicator. Turns out, it’s really simple. We can use Home Assistant’s built-in sun integration to detect when it’s night or day and use the templating engine to translate the integration’s sun.sun entity into a 1/0 night entity.

To do so, you have to edit your Home Assistant installation’s configuration.yaml file and add the following code:

sensor:
– platform: template
sensors:
nightstate:
friendly_name: Night State
value_template: "{% if is_state('sun.sun', 'below_horizon') %}1{% else %}0{% endif %}"

This template creates a sensor.nightstate entity that will be set to 1 when sun.sun is below_horizon and 0 when sun.sun is not. That’s exactly what mini-graph-card needs to apply the night indicator shading.

Restart your Home Assistant for the template to load and if everything goes right, you should have sensor.nightstate available to you. As an example, the following code is what I use for my bedroom temperature card with night indicator shading:

align_header: left
align_icon: left
entities:
– entity: sensor.multi_bedroom_temperature
– entity: sensor.multi_bedroom_humidity
show_graph: false
show_state: true
– entity: sensor.multi_bedroom_pressure
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
font_size: 80
hour24: true
icon: mdi:bed-king-outline
name: Bedroom
points_per_hour: 1
show:
extrema: true
type: custom:mini-graph-card

Not too hard, right? Once you’ve got this set up you’ll start adding night indicators to all of your charts!

2 Comments
  1. Johan 25 March 2022

    Hi Guy,

    Very nice. Works perfect and looks beautiful. Thank you for this tutorial.

    I have one thing i’m struggeling with a bit. How do you style the font-size different of the temperature and the humidity. I’m looking to have the temperature in a bigger font-size and the humidity in smaller?

    // J

    Reply
    • Guy 30 March 2022

      Hi Johan, thanks! I’m afraid that I don’t style my font-sizes separately in this card, I just use “font_size: 80” to make it smaller for all of them equally. That works out on all of the devices I view this card on.

What do you think?