Lovelace: mini graph card

Can someone explain, why this is always showing the FIRST state and not the last:

>       type: custom:mini-graph-card
>       name: Network RX / TX (7 Days)
>       entities:
>         - entity: sensor.fritz_box_6660_cable_gb_received
>           name: Download
>           color: rgb(52, 152, 219)
>         - entity: sensor.fritz_box_6660_cable_gb_sent
>           name: Upload
>           color: orange
>           y_axis: secondary
>       show:
>         labels: true
>         labels_secondary: true
>         graph: bar
>         icon: false
>       height: 200
>       hours_to_show: 168
>       line_width: 2
>       group_by: date
>       aggregate_func: diff
>       lower_bound_secondary: 0
>       lower_bound: 0
>       style: |
>         ha-card {
>           background:none;
>           }
>         rect.bar {
>           filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
>           width:65px;
>           }
>         .bars:first-of-type {
>           transform: scaleY(49%);          
>           }
>         .bars:last-of-type {
>           transform-origin: center;
>           transform: rotateX(180deg) scaleY(49%) translateY(-51%) translateX(-35.5px);
>           }
>         .graph__labels.--secondary {
>           flex-direction: column-reverse;
>           align-items: flex-end;
>         }
>         .graph__container__svg {
>           margin-bottom: 16px;
>         }