Rebuild / Replacement of Home Assistant Climate History Graph

[rwegnerGermany]

Hi,
I do like the HASS default history graph for climate (heating?!) devices where the fill indicates the heating is running, but wanted to enhance it with plotly.

• The orange fill indicates the heatpump is running.
• Orange line is the heating supply temp. (the spike on the left is warm water)
• Dashed lines is outside: air temp (straight line), supply temp, return temp
• Green is the room target temp

type: custom:plotly-graph
entities:
  - entity: climate.vicare_heating
    attribute: current_temperature
    unit_of_measurement: °C
    showlegend: false
# the trick is to draw an invisible line at supply temp, but 0 when the heatpump (compressor) is off
    filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : 0
    line:
      width: 0 # to avoid vertical lines
      color: orange
      opacity: 0.5
    fill: tozeroy
  - entity: climate.vicare_heating
    attribute: temperature # room target temp
    name: Target Temp.
    unit_of_measurement: °C
    line:
      color: '006814'
      width: 2
  - entity: climate.vicare_heating
    attribute: current_temperature # supply temp
    name: Supply Temp.
    show_value:
      right_margin: 15
    unit_of_measurement: °C
    line:
      color: '#C44700'
  - entity: sensor.vicare_return_temperature
    name: Return Temp.
    unit_of_measurement: °C
    line:
      color: '#9403B5'
  - entity: sensor.vicare_outside_temperature
    name: Outside Temp.
    unit_of_measurement: °C
    showlegend: false
    line:
      color: rgb(0,200,40)
      dash: dot
    yaxis: y2
  - entity: sensor.vicare_primary_circuit_supply_temperature
    name: Primary Supply Temp.
    unit_of_measurement: °C
    showlegend: false
    line:
      color: orangered
      dash: dot
    yaxis: y2
  - entity: sensor.vicare_primary_circuit_return_temperature
    name: Primary Return Temp.
    unit_of_measurement: °C
    showlegend: false
    show_value: true
    line:
      color: '#9403B5'
      dash: dot
    yaxis: y2
hours_to_show: 16
refresh_interval: 30
layout:
  height: 400
  showlegend: false
  yaxis:
    range:
      - 15
      - 50
  yaxis2:
    range:
      - 0
      - 14

[dbuezas]

Very cool,
smart usage of multiple y axes!

In case you haven't seen it, you may enjoy trying the color_scheme property for pre-made palettes. Also the entity opacity property