Time-range overlays (area/annotations) fail to render

[GiLMORE80]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
It is not possible to reliably visualize time-based ranges (e.g. charge/discharge windows) on top of a time-series chart.

Specifically:

• Area series used to highlight a time window do not render or behave inconsistently
• annotations.xaxis ranges do not appear, even when timestamps are correct (milliseconds)
• Splitting the line into multiple colored series works partially, but breaks line continuity

The legend and base series render correctly, but overlays or visual indicators for time ranges are either missing or not rendered.

Version of the card
Version: 2.2.3

To Reproduce

Example 1 – Using annotations

yaml

type: custom:apexcharts-card
header:
  show: true
  title: EPEX Prices 48h
graph_span: 48h
span:
  start: day
series:
  - entity: sensor.epex_prices_48h
    name: Price
    type: line
    data_generator: |
      const data = entity.attributes.prices || [];
      return data.map(item => [
        new Date(item.start).getTime(),
        item.value
      ]);
apex_config:
  xaxis:
    type: datetime
  annotations:
    xaxis:
      - x: "{{ states('sensor.charge_window_start_ts') | int * 1000 }}"
        x2: "{{ states('sensor.charge_window_end_ts') | int * 1000 }}"
        fillColor: "#00E396"
        opacity: 0.25

Sensors used:
sensor.charge_window_start_ts: 1775131200
sensor.charge_window_end_ts: 1775136600

Observed behavior:
Price line and legend render correctly, but no shaded annotation appears.

Example 2 – Using area series with null values outside the window

yaml

type: custom:apexcharts-card
header:
  show: true
  title: EPEX Prices 48h with Area Window
graph_span: 48h
span:
  start: day
series:
  - entity: sensor.epex_prices_48h
    name: Price
    type: line
    data_generator: |
      const data = entity.attributes.prices || [];
      return data.map(item => [
        new Date(item.start).getTime(),
        item.value
      ]);
  - entity: sensor.epex_prices_48h
    name: Charge Window
    type: area
    color: "#00E396"
    opacity: 0.25
    data_generator: |
      const start = Number(states['sensor.charge_window_start_ts'].state) * 1000;
      const end = Number(states['sensor.charge_window_end_ts'].state) * 1000;
      const data = entity.attributes.prices || [];
      return data.map(item => {
        const t = new Date(item.start).getTime();
        if (t >= start && t <= end) return [t, item.value];
        return [t, null];
      });

Observed behavior:
Area series does not render, even though the data is correct. Only the line series appears. The legend is visible

Screenshots

• Chart renders correctly (price line visible)
• Legend is visible
• No shaded region or annotation is shown

Expected behavior
Ability to visualize a time range on the chart.

For example:

• A shaded region between start_ts and end_ts
• Or another visual indication (background, overlay, or colored segment)

This should work reliably using either:

• annotations.xaxis
• or a supported series type

Desktop (please complete the following information):

• Browser: Chrome
• Version: 146.0.7680.165

Smartphone (please complete the following information):

• Device: iPhone 16 Pro
• OS: iOS 26.4 (latest)
• Browser : Chrome
• Version: 146.0.7680.151

Additional context
Use case:

• Electricity price optimization (EPEX)
• Visualizing cheapest (charge) and most expensive (discharge) time windows

This is a common use case for:

• Home batteries
• EV charging
• Energy dashboards

It appears that while the card supports time-series data well, there is no reliable way to visualize time-based ranges, or current methods (annotations/area) are not functioning as expected.