Understanding "extend_to"

[drzoidberg33]

Hey 👋

I'm trying to understand how to use the extend_to option on my area/line graphs, it states that setting this to end should extend it to the end of the chart but I'm not seeing that or not understanding what this means.

Here is my chart:

I'm trying to get the "Element state" and "Element heating" items to just always expand to fill the entire chart, these are just boolean values and currently they just stop at 1.

Any tips would be appreciated!

This is my yaml:

type: custom:apexcharts-card
graph_span: 6h
yaxis:
  - id: first
    decimals: 0
    min: 0
    max: 100
    apex_config:
      tickAmount: 6
  - id: second
    opposite: true
    show: true
    decimals: 1
    apex_config:
      tickAmount: 2
header:
  show: false
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: water_heater.geyserwise_water_heater
    name: Current Temperature
    attribute: current_temperature
    yaxis_id: first
    stroke_width: 2
  - entity: sensor.geyserwise_water_heater_collector_temperature
    name: Collector Temperature
    yaxis_id: first
    stroke_width: 2
  - entity: water_heater.geyserwise_water_heater
    name: Target Temperature
    attribute: temperature
    yaxis_id: first
    curve: stepline
    stroke_width: 3
    stroke_dash: 3
    color: purple
  - entity: water_heater.geyserwise_water_heater
    name: Element State
    yaxis_id: second
    transform: 'return x === ''electric'' ? 1 : 0;'
    type: area
    curve: stepline
    stroke_width: 0
    color: grey
    opacity: 0.2
  - entity: binary_sensor.geyserwise_water_heater_element
    name: Element Heating
    yaxis_id: second
    transform: 'return x === ''on'' ? 1 : 0;'
    extend_to: end
    type: area
    curve: stepline
    stroke_width: 0
    color: red
  - entity: sensor.geyser_circuit_breaker_energy_daily
    name: Element kWh (daily)
    yaxis_id: second
    type: area
    curve: stepline
    stroke_width: 0
    color: yellow
    opacity: 0.5