Initial idea of @kalkih (see here), added some flexibility.
type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_local_download
- entity: sensor.speedtest_local_upload
y_axis: secondary
show_state: true
show:
labels: true
labels_secondary: true
height: 300
hours_to_show: 24
line_width: 2
points_per_hour: 60
lower_bound_secondary: 0
lower_bound: 0
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
transform: scaleY(50%);
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
transform-origin: center center;
transform: rotateX(180deg) scaleY(50%) translateY(-150px);
}
.graph__labels.--secondary {
flex-direction: column-reverse;
}
.graph__container__svg {
margin-bottom: 20px
}
Also, it is possible to to add a divider line as an X-axis:
type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_local_download
- entity: sensor.speedtest_local_upload
y_axis: secondary
show_state: true
height: 200
show:
labels: true
labels_secondary: true
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
transform: scaleY(50%);
}
rect.fill--rect:nth-of-type(1) {
outline: 1px solid var(--secondary-text-color);
}
rect.fill--rect:nth-of-type(2),
rect.line--rect:last-of-type,
.line--points:last-of-type {
transform-origin: center center;
transform: rotateX(180deg) scaleY(50%) translateY(-100px);
}
.graph__labels.--secondary {
flex-direction: column-reverse;
}
.graph__container__svg {
margin-bottom: 16px;
}