Stack Graph Card color not working

I would like to leave this card with the colorful graphic

1

The code:

type: custom:mini-graph-card
align_header: left
align_icon: left
entities:
  - entity: sensor.quarto_jogos_temperatura
    show_State: true
    name: Temp
    line_width: 3
  - entity: sensor.quarto_jogos_umidade
    show_state: true
    name: Humidade
    color: var(--blue-color)
    y_axis: secondary
  - color: gray
    entity: sensor.nightstate
    name: Night
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
font_size: 80
hour24: true
icon: mdi:controller-classic
name: Quarto Jogos
points_per_hour: 1
show:
  labels: true
  extrema: true
  labels_secondary: true

I try several times and a do this

2

The code:

type: custom:mini-graph-card
align_header: left
align_icon: left
entities:
  - entity: sensor.quarto_jogos_umidade
    show_state: true
    name: Humidade
    color: var(--blue-color)
    y_axis: secondary
  - entity: sensor.quarto_jogos_temperatura
    show_State: true
    name: Temperature
color_thresholds:
  - value: 20
    color: '#33FFF6'
  - value: 25
    color: '#FFC733'
  - value: 30
    color: '#FF0000'
font_size: 80
hour24: true
icon: mdi:controller-classic
name: Quarto Jogos
points_per_hour: 1
line_width: 3
show:
  labels: true
  extrema: true
  labels_secondary: true

Is almost done, However, I couldn’t invert the position of the graphs, every time I put humidity first the color code doesn’t work… and I also don’t know why the temperature and humidity information doesn’t appear together…

This is a proper place to ask similar questions: