How do I display current hour in a custom card

Configuration Frontend
1

Hi!

I’m using ‘custom:mini-graph-card’ to display when my cat has been to his litterbox (the one with a cat emoji). I would like it to be easier to “read” by adding each hour below each staple. Since the hours are changing I can’t use my first idea (CSS to write “ha-card:after{content:”";}").

Do you have any idea on how to solve this? Or how to display the graph like this: 0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23 – instead of changing place each hour.

44
442652×1520 515 KB

I’m open for any suggestions.

Here is my current code:

cards: null
color_thresholds:
  - color: '#fdff62'
    value: -1
  - color: '#40a0e0'
    value: 0.5
  - color: '#82ebe0'
    value: 0
decimals: 0
entities:
  - entity: sensor.kattlada
extrema: true
hours_to_show: 24
name: "\U0001F431"
points_per_hour: 1
show:
  graph: bar
  icon: false
  labels: false
  state: false
style: |
  ha-card{
    background: rgba(0,0,0,0.4) !important;
    padding: 20px;
    padding-bottom: 5px;
  }
  ha-card{
    color: #ccc !important
  }
  ha-card{
  --iron-icon-fill-color: rgba(255,255,255,0.85);
  color: #009999
  }
  span.ellipsis{
  font-size:24px !important;
  }
  div.name, span.ellipsis{
  opacity:1 !important;
  }
title: "\U0001F431"
type: 'custom:mini-graph-card'