The height of the curve (y-axis) does not match the value of the sensor

[vbueschken]

Checklist

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

Describe the bug
The height of the curve (y-axis) does not match the value of the sensor

Version of the card
Version: 2.0.4

To Reproduce
This is the configuration I used:
Template sensor:

name: "SollWohnzimmer"
unit_of_measurement: "°C"
state_class: "measurement"
state: >
{{state_attr('climate.shelly_trv_wohnzimmer','temperature') }}

apexcharts-card:

type: custom:apexcharts-card
graph_span: 12h
yaxis:

id: first
decimals: 0
max: 25
apex_config:
tickAmount: 8
id: second
opposite: true
decimals: 0
min: 0
apex_config:
tickAmount: 8
header:
show: true
title: Heizungssteuerung
show_states: true
colorize_states: true
series:
entity: sensor.shelly_trv_wohnzimmer_temperature
type: line
yaxis_id: first
entity: sensor.sollwohnzimmer
type: line
curve: stepline
yaxis_id: first
entity: number.shelly_trv_wohnzimmer_valve_position
type: line
curve: stepline
yaxis_id: second

Expected behavior
The height of the curve (y-axis) should match the value of the sensor

Desktop (please complete the following information):

Browser [chrome]
Version [Version 117.0.5938.134 (Offizieller Build) (64-Bit)]

[stromfo]

Same issue here. The red series should be at 65.1 at the dotted line.
Version: 2.0.4 here as well.

  type: custom:apexcharts-card
  experimental:
    color_threshold: true
    brush: true
  header:
    show: true
    show_states: true
    colorize_states: false
  graph_span: 2d
  span:
    start: day
  brush:
    selection_span: 2d
    apex_config:
      grid:
        show: false
      yaxis:
        show: false
  apex_config:
    grid:
      show: true
      borderColor: '#404040'
      strokeDashArray: 3
      position: back
    legend:
      show: false
    tooltip:
      fixed:
        enabled: true
        position: topLeft
        offsetY: -55
  yaxis:
    - id: forbruk
      show: true
      apex_config:
        forceNiceScale: true
        tickAmount: 4
        labels:
          formatter: |
            EVAL:v => `${v.toFixed(0)} kWh`
    - id: pris
      opposite: true
      show: true
      apex_config:
        forceNiceScale: true
        tickAmount: 4
        labels:
          formatter: |
            EVAL:v => `${v.toFixed(0)} øre`
  now:
    show: true
    color: grey
  series:
    - entity: sensor.power_consumption_hour
      yaxis_id: forbruk
      name: Timesforbruk
      float_precision: 2
      unit: ' kWh'
      type: column
      color: '#4d4d4d'
      stroke_width: 2.5
      group_by:
        duration: 60min
        func: last
    - entity: sensor.nordpool_inkl_mva_nettleie
      yaxis_id: pris
      name: Strømpris inkl. nettleie
      unit: ' øre/kWh'
      float_precision: 0
      transform: return x*100
      show:
        in_chart: false
    - entity: sensor.nordpool_inkl_mva_nettleie
      yaxis_id: pris
      name: Strømpris inkl. nettleie
      unit: ' øre/kWh'
      curve: stepline
      type: area
      color_threshold:
        - value: 100
          color: blue
        - value: 200
          color: red
      opacity: 0.4
      extend_to: now
      show:
        in_chart: true
        in_header: false
        in_brush: true
      stroke_width: 0.5
      data_generator: >
        var output =
        entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow); return
        output.map((entry) => { return [new Date(entry.start), entry.value*100]});
    - entity: sensor.nordpool_inkl_mva
      yaxis_id: pris
      name: Nordpool inkl. mva.
      unit: ' øre/kWh'
      curve: stepline
      type: area
      color: red
      opacity: 0.4
      extend_to: now
      show:
        in_chart: true
        in_header: true
        in_brush: true
      stroke_width: 0.5
      data_generator: >
        var output =
        entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow); return
        output.map((entry) => { return [new Date(entry.start), entry.value]});

[vidarak]

Same here. This is only an issue when you have 2 yaxis.

With 2nd yaxis (incorrect display):

Without 2nd yaxis (correct display):

type: custom:config-template-card
entities:
  - sensor.apexchart_graphspan
  - sensor.apexchart_graphoffset
variables:
  gspan: states['sensor.apexchart_graphspan'].state
  goffset: states['sensor.apexchart_graphoffset'].state
card:
  type: custom:apexcharts-card
  header:
    show: true
    title: Pris + Forbruk + Powersaver
  now:
    show: true
    label: Nå
  graph_span: ${gspan}
  experimental:
    color_threshold: true
  span:
    start: day
    offset: ${goffset}
  apex_config:
    legend:
      show: true
    tooltip:
      enabled: true
      x:
        show: false
    yaxis:
      - id: price
        show: true
        decimalsInFloat: 1
        forceNiceScale: true
      - id: asdf
        opposite: true
  series:
    - entity: sensor.powersavervvb
      yaxis_id: price
      extend_to: false
      name: Pris
      type: line
      curve: stepline
      float_precision: 2
      color: red
      stroke_width: 1
      group_by:
        func: max
      show:
        legend_value: false
        datalabels: false
        extremas: true
      data_generator: |
        return entity.attributes.hours.map((entry) => {
          return [new Date(entry.start), entry.price];
        });
    - entity: sensor.powersavervvb
      yaxis_id: price
      extend_to: false
      name: Pris/2
      type: line
      curve: stepline
      float_precision: 2
      color: yellow
      stroke_width: 1
      group_by:
        func: max
      show:
        legend_value: false
        datalabels: false
        extremas: true
      data_generator: |
        return entity.attributes.hours.map((entry) => {
          return [new Date(entry.start), entry.price/2];
        });

You can tell from the range chosen on 2nd yaxis that the 2nd series actually binds to that axis instead of the specified yaxis_id

[vbueschken]

any news on this issue?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[vbueschken]

Issue still exists

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[vidarak]

This is still an issue. Any chance this could be prioritized?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[diamant-x]

Same issue here. Once I enable the brush, the location of the series not in_brush is wrongly placed.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[stromfo]

Still an issue...

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[vidarak]

still a problem

[vbueschken]

The issue is noch 1 year old - looks like nobody takes care about it.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[vidarak]

Still hoping someone smarter than me would prioritize fixing this

[vbueschken]

Still an issue. the chart on the dashboard shows the wrong value:

If you are in 'Edit mode' for the dashboard, it shows the right values:

[vidarak]

Update: I found a workaround for my particular variant of this issue. By defining the dataseries to be mapped on each yaxis definition (with the "seriesName" attribute), it correctly maps the dataseries to the correct yaxis. This in turn resolved the problem that the 2nd dataseries incorrectly mapped to a 2nd yaxis (having a different scale). I do this instead of defining "yaxis_id" on the dataseries entities.

   yaxis:
      - id: price
        show: true
        decimalsInFloat: 1
        forceNiceScale: true
        seriesName:
          - Importpris
          - Eksportpris