Why does one of my graphs not adher to the correct axis?

[Din-BH]

I have a graph showing both actual temperature & rain as well as the forecast of the same. But the temperature forecast does not show on the correct axis "right". Instead it seems like it would be on it's own invisible axis. Can anyone figure out why?

cards:
  - type: custom:apexcharts-card
    card_mod:
      style:
        .: |
          ha-card {
            transform: translate(0,-4px);
            padding-top: 0px;
          }
          div#header__states {
            padding-top: 213px;
          }
          div#state__value {
          }
          div#state__name {
            transform: translate(0px,-8px);
          }
    hours_12: false
    cache: true
    experimental:
      disable_config_validation: false
    graph_span: 36h
    span:
      offset: +12h
    now:
      show: true
    show:
      loading: false
    update_delay: 30s
    header:
      show: true
      floating: true
      colorize_states: true
      title: ' '
      show_states: true
    apex_config:
      chart:
        height: 250px
      yaxis:
        - id: left
          show: true
          opposite: false
          decimalsInFloat: 1
          tickAmount: 5
          max: 5
          labels:
            formatter: |
              EVAL:function (value) {
                return value.toFixed(1)+" mm";
              }
        - id: right
          show: true
          opposite: true
          tickAmount: 5
          decimalsInFloat: 1
          labels:
            formatter: |
              EVAL:function (value) {
                return value.toFixed(1)+" °C";
              }
    series:
      - entity: sensor.netatmo_netatmo_regn_rain
        yaxis_id: left
        type: column
        color: '#3498db'
        name: Regn
        stroke_width: 3.8
        transform: 'return x>0 ? x : null;'
        show:
          in_header: false
          legend_value: false
      - entity: sensor.netatmo_netatmo_regn_rain_today
        name: Regn idag
        color: '#3498db'
        show:
          legend_value: true
          in_chart: false
      - entity: sensor.netatmo_netatmo_ute_temperature
        extend_to: now
        yaxis_id: right
        name: Ute temp
        stroke_width: 2
        show:
          in_header: true
          legend_value: false
      - entity: weather.laajalahti
        yaxis_id: right
        name: '  Prognos'
        unit: °C
        stroke_width: 2
        show:
          in_header: false
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.temperature];
          });
      - entity: weather.laajalahti
        yaxis_id: left
        name: ' '
        unit: mm
        stroke_width: 2
        type: column
        color: '#1448ab'
        show:
          in_header: false
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.precipitation];
          });

[Din-BH]

Ok. There is clearly something wrong in the chart logic, but I found a workaround, or rather, a bunch of combined actions that made the things look right. Adding details below so that someone that might encounter similar issues may find remedy.

So what did I do to make it work? Main issue seems was the extra rain attribute that was NOT shown in chart, since it was only used to create the header. When that series was in the middle of the other series as above, the result was all kinds of issues for the chart graphs that were either not taken into account on calculating axis max, or the graphs were otherwise out of place.

Then I also moved the apex_config entries under the yaxis. Not sure it did anything really, but the extension then became picky when I had not added an axis_id for the header-only entry that was not in the chart anyway. However, since adding an axis did not make any difference as to where the header was actually added, I ended up having to make a similar header-only entry for the other header so that I got it where I wanted it.

cards:
  - type: custom:apexcharts-card
    card_mod:
      style:
        .: |
          ha-card {
            transform: translate(0,-4px);
            padding-top: 0px;
          }
          div#header__states {
            padding-top: 213px;
          }
          div#state__value {
          }
          div#state__name {
            transform: translate(0px,-8px);
          }
    hours_12: false
    cache: true
    experimental:
      disable_config_validation: false
    graph_span: 36h
    span:
      offset: +12h
    now:
      show: true
    show:
      loading: false
    update_delay: 30s
    header:
      show: true
      floating: true
      colorize_states: true
      title: ' '
      show_states: true
    apex_config:
      chart:
        height: 250px
    yaxis:
      - id: left
        show: true
        opposite: false
        max: 5
        apex_config:
          decimalsInFloat: 1
          tickAmount: 5
          labels:
            formatter: |
              EVAL:function (value) {
                return value.toFixed(1)+" mm";
              }
      - id: right
        show: true
        opposite: true
        apex_config:
          tickAmount: 5
          decimalsInFloat: 1
          labels:
            formatter: |
              EVAL:function (value) {
                return value.toFixed(1)+" °C";
              }
    series:
      - entity: sensor.netatmo_netatmo_ute_temperature
        extend_to: now
        yaxis_id: right
        color: '#e74c3c'
        name: Ute temp
        stroke_width: 2
        show:
          in_header: false
          legend_value: false
      - entity: sensor.netatmo_netatmo_regn_rain
        yaxis_id: left
        type: column
        color: '#3498db'
        name: Regn
        stroke_width: 3.8
        transform: 'return x>0 ? x : null;'
        show:
          in_header: false
          legend_value: false
      - entity: weather.laajalahti
        yaxis_id: right
        name: '  Prognos'
        color: '#9b59b6'
        unit: °C
        stroke_width: 2
        show:
          in_header: false
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.temperature];
          });
      - entity: weather.laajalahti
        yaxis_id: left
        name: ' '
        unit: mm
        stroke_width: 2
        type: column
        color: '#1448ab'
        show:
          in_header: false
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.precipitation];
          });
      - entity: sensor.netatmo_netatmo_regn_rain_today
        yaxis_id: left
        name: Regn idag
        color: '#3498db'
        show:
          in_header: true
          legend_value: false
          in_chart: false
      - entity: sensor.netatmo_netatmo_ute_temperature
        yaxis_id: right
        color: '#e74c3c'
        name: Ute temp
        show:
          in_header: true
          legend_value: false
          in_chart: false