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.

Full disclosure: As of August 1, 2023, I am an employee of Nabu Casa, the company that builds Home Assistant. This blog post was written before I started working there. My opinions on this blog are my own and do not reflect the views of Nabu Casa. Any recommendation of products here is of a personal nature and does not signal approval by Nabu Casa.

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:

– platform: template
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
– 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
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!

  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

    • 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.

  2. jeremy 18 October 2022

    Firstly thankyou for writing up the idea of shading to show time periods. I’m using it the other way to show when its day for solar panels, but:

    I don’t think you need to create a sensor. There is already the sensor: ‘sun.sun’
    True, that doesn’t return numeric values but in the mini-graph card you can map values:
    – value: below_horizon
    label: 0
    – value: above_horizon
    label: 2

    Overall its probably the same number of lines of code but using sun.sun and state_map keeps all the logic in the same place.

  3. Dams 3 November 2023

    Good morning
    I had done this function, but with the new template formatting, it no longer works…
    What should we do now?


What do you think?