Split energy consumption by periods and present them on a dashboard

Guys, please help me, I’m confused.

I have idea to compare the energy consumption at the specific time periods, every day during a month. Sorry if it’s not a new idea, but I didn’t find related topics!
I see it similar to this presentation:

where every part of bars is a sensor’s data.
But I don’t have idea how to do it. I don’t know which card to choose to show it on the dashboard, I tried ApexCharts-Card, but couldn’t get it to work,
Screenshot 2024-12-25 at 21-54-45 Саксаганского 24 – Home Assistant

Maybe a table form will be better, but what table form card to use?

The code is here:

type: custom:apexcharts-card
graph_span: 31d
stacked: true
color_list:
- "#00f0f0"
- "#00c0c0"
- "#00a0a0"
- "#008080"
- "#006060"
- "#003f3f"
now:
show: true
label: Now
color: var(--secondary-color)
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
all_series_config:
type: column
stack_group: energy_time_mark
series:
- entity: sensor.energy_at_01_time
name: Wakeup Time
- entity: sensor.energy_at_02_time
name: Work Time Start
- entity: sensor.energy_at_06_time
name: Time 06
- entity: sensor.energy_at_03_time
name: Work Time Stop
- entity: sensor.energy_at_05_time
name: Dark Time
- entity: sensor.energy_at_04_time
name: Bed Time

To get this data I’ve created a package with definitions:

    input_datetime:
      time_01:
        name: Time 01
        has_time: &only_time true
    
      time_02:
        name: Time 02
        has_time: *only_time
.....
      time_06:
        name: Time 06
        has_time: *only_time

and input_number & sensor:

    input_number:
        energy_at_time_01:
            name: Energy at Time 01
            min: &energy_min 0
            max: &energy_max 99999.99
            step: &energy-step 1
            mode: &energy_mode box
            unit_of_measurement: &energy_unit kWh
            icon: &energy_icon mdi:meter-electric
        energy_at_time_02:
            name: Energy at Time 02
            min: *energy_min
            max: *energy_max
            step: *energy-step
            mode: *energy_mode
            unit_of_measurement: *energy_unit
            icon: *energy_icon
........

    template:
      - sensor:
          - name: energy_at_01_time
            unique_id: 90afb412-d2f6-565d-a8e3-1944fb23eba4
            unit_of_measurement: "kWh"
            state: >
                {% if states('input_number.energy_at_time_01') not in ['unknown', 'unavailable'] %}
                    {{ states('input_number.energy_at_time_01') | float(0) }}
                {% else %}
                    0
                {% endif %}          
            device_class: &energy_class energy
            state_class: &energy_state measurement

          - name: energy_at_02_time
            unique_id: 5d3b18ec-4fca-513a-b6f3-3d2edd137339
            unit_of_measurement: "kWh"
            state: >
                {% if states('input_number.energy_at_time_02') not in ['unknown', 'unavailable'] %}
                    {{ states('input_number.energy_at_time_02') | float(0) }}
                {% else %}
                    0
                {% endif %}          
            device_class: *energy_class
            state_class: *energy_state
..........
Also there are the automations to set the energy data, example is below:

      - id: a0342cd6
        alias: Set Energy at Time 01
        description: ""
        triggers:
          - trigger: time
            at: input_datetime.time_01
        conditions: []
        actions:
          - action: input_number.set_value
            metadata: {}
            data:
              value: "{{ states('sensor.daily_energy') | float }}"
            target:
              entity_id: input_number.energy_at_time_01
........

Can you please make an better example? I am not sure what you are trying to achive.
You already have the

and the

When you want a table you can export the view on the three dots and download data.