Y axis not scaling correctly

[PalleRaa]

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
In some of my charts the data goes out-of-bounds because the y-axis is not scaling to the lowest point in the data series.

Version of the card
Version: 2.1.2

To Reproduce
This is the configuration I used:
Example #1

type: custom:apexcharts-card
graph_span: 48h
header:
  show: true
  title: Kælder
  show_states: true
series:
  - entity: sensor.basement_wall_sensor_humidity
    type: line
    unit: '%'
    show:
      name_in_header: false

Example #2

type: custom:apexcharts-card
graph_span: 48h
header:
  show: true
  title: Toilet
  show_states: true
series:
  - entity: sensor.toilet_wall_sensor_temperature
    type: line
    unit: °C
    show:
      name_in_header: false

Screenshots
Example #1

Example #2

Expected behavior
I expect the y-axis to scale correctly according to highest and lowest value of data

Desktop (please complete the following information):
Version 128.0.6613.85 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: iPhone12]
• OS: iOS 17.6.1
• Browser Stock Safari

Additional context
Add any other context about the problem here.

[gcoan]

I think I have the same problem, the y-axis not being auto-scaled to the data series and values are getting clipped off the top and bottom.

For some reason, the y-axis is scaling from 15 to 40 despite min and max not being set (so default to auto). Setting them explicitly to min/max auto has the same result:

If I manually add a min and max the chart correctly displays all the data, e.g. min -5, max 45:

Chart config:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
header:
  title: Agile Price Forecast
  show: true
  show_states: true
  colorize_states: true
graph_span: 5d
now:
  show: true
  label: Now
yaxis:
  - id: price (pence)
    decimals: 0
    min: -5
    max: 45
    apex_config:
      tickAmount: 10
stacked: false
span:
  start: day
series:
  - entity: sensor.octopus_energy_electricity_XXXX_XXXX_current_rate
    name: Actual Agile Import (current rate)
    transform: return x * 100;
    show:
      in_chart: false
    unit: p/kWh
  - entity: >-
      event.octopus_energy_electricity_XXXX_XXXX_current_day_rates
    yaxis_id: price
    name: Actual Import (today)
    color: grey
    opacity: 1
    stroke_width: 2
    extend_to: now
    type: column
    unit: p/kWh
    data_generator: |
      return entity.attributes.rates.map((entry) => {
         return [new Date(entry.start), entry.value_inc_vat*100];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
  - entity: event.octopus_energy_electricity_XXXX_XXXX_next_day_rates
    yaxis_id: price
    name: Actual Import (tomorrow)
    color: grey
    opacity: 0.3
    stroke_width: 2
    type: column
    unit: p/kWh
    data_generator: |
      return entity.attributes.rates.map((entry) => {
         return [new Date(entry.start), entry.value_inc_vat*100];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
  - entity: sensor.octopus_agile_predict
    yaxis_id: price
    name: Predicted Agile
    color: red
    opacity: 1
    stroke_width: 1
    extend_to: now
    unit: p/kWh
    data_generator: |
      return entity.attributes.prices.map((entry) => {
         return [new Date(entry.date_time), entry.agile_pred];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false

[PalleRaa]

Could be related to #780

[gcoan]

Could be related to #780

Thank you, my chart issue is #780. I had looked at that issue and thought that it wasn't, but now I have pasted the YAML for my chart above, I can see that I am using in_chart: false for one of my series

[stormdilley]

I have a similar issue, which I reported, but it was just closed without any comment or explanation.
max: auto Used to work and still does in earlier versions, but in this version, only an actual value works, but the value max, I just end up with a value of 10 irrespective of what it should be. Actually to go further, if you set max: (anything other than a number) you get the value 10).
I have tried this on a new build of Home Assistant still no joy, the last version that works correctly is v2.0.4

[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.

[gcoan]

this is still an issue

[stormdilley]

I have spent 2 complete days messing about this issue. I have built two separate Home Assitant installs on separate RPI's one with the previous version of the Apex Charts and one with the up to date version. In both instances the way that they work is entirely different. I have tried many different ways of assembling the code in the latest version and NONE of them work properly. The old version seems to work flawlessly, so unless someone can fix the issues in v2.1.2, I will stick with v2.0.4. Thanks for reading this.

…

On Tue, 24 Dec 2024 at 02:34, github-actions[bot] ***@***.***> wrote: 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. — Reply to this email directly, view it on GitHub <#773 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BMFW53NF3A3X3XH2YORT5J32HDBZ7AVCNFSM6AAAAABOA7UP5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRQGU2TMMBRGU> . You are receiving this because you commented.Message ID: ***@***.***>

[weado]

Hello, I have the same issue.

But if I put yaxis max and min :

[vidarak]

I think I have the same problem, the y-axis not being auto-scaled to the data series and values are getting clipped off the top and bottom.

For some reason, the y-axis is scaling from 15 to 40 despite min and max not being set (so default to auto). Setting them explicitly to min/max auto has the same result:

If I manually add a min and max the chart correctly displays all the data, e.g. min -5, max 45:

Chart config:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
header:
  title: Agile Price Forecast
  show: true
  show_states: true
  colorize_states: true
graph_span: 5d
now:
  show: true
  label: Now
yaxis:
  - id: price (pence)
    decimals: 0
    min: -5
    max: 45
    apex_config:
      tickAmount: 10
stacked: false
span:
  start: day
series:
  - entity: sensor.octopus_energy_electricity_XXXX_XXXX_current_rate
    name: Actual Agile Import (current rate)
    transform: return x * 100;
    show:
      in_chart: false
    unit: p/kWh
  - entity: >-
      event.octopus_energy_electricity_XXXX_XXXX_current_day_rates
    yaxis_id: price
    name: Actual Import (today)
    color: grey
    opacity: 1
    stroke_width: 2
    extend_to: now
    type: column
    unit: p/kWh
    data_generator: |
      return entity.attributes.rates.map((entry) => {
         return [new Date(entry.start), entry.value_inc_vat*100];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
  - entity: event.octopus_energy_electricity_XXXX_XXXX_next_day_rates
    yaxis_id: price
    name: Actual Import (tomorrow)
    color: grey
    opacity: 0.3
    stroke_width: 2
    type: column
    unit: p/kWh
    data_generator: |
      return entity.attributes.rates.map((entry) => {
         return [new Date(entry.start), entry.value_inc_vat*100];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false
  - entity: sensor.octopus_agile_predict
    yaxis_id: price
    name: Predicted Agile
    color: red
    opacity: 1
    stroke_width: 1
    extend_to: now
    unit: p/kWh
    data_generator: |
      return entity.attributes.prices.map((entry) => {
         return [new Date(entry.date_time), entry.agile_pred];
       });     
    offset: "-15min"
    show:
      in_header: false
      legend_value: false
      offset_in_name: false

I notice you have multiple data series mapped to the same yaxis, so you might be running into same issue as me. I just found a workaround for this:
#617 (comment)

[stormdilley]

As already mentioned I spent 2 days trying to get this to work and I still have the new Apex version on my test HA Pi. I have looked at #617 (comment) and that doesn't work for me.

The nearest that I can get this to work is as follows, but 'forceNiceScale' doesn't work the wy this configured and I have given up with max and min values.

type: custom:config-template-card
entities:
  - entity: sensor.my_dayhours
  - entity: sensor.my_offset
variables:
  offs: states['sensor.my_offset'].state+'h'
  span: states['sensor.my_dayhours'].state+'h'
card:
  type: custom:apexcharts-card
  graph_span: ${span}
  span:
    start: day
    offset: ${'+'+offs }
  header:
    show: true
    show_states: true
    title: ENERGY TODAY
  apex_config:
    chart:
      background: lightcyan
      fontFamily: Arial
      foreColor: darkblue
      height: 350
    legend:
      show: true
      fontSize: 15
      fontFamily: Arial
      fontWeight: 400
      labels:
        useSeriesColors: true
  yaxis:
    - id: Energy
      opposite: true
      decimals: 0
      apex_config:
        axisBorder:
          show: true
          color: darkblue
        axisTicks:
          show: true
          color: darkblue
        title:
          text: Energy
          style:
            color: greenyellow
            fontSize: 16
            fontWeight: 600
            fontFamily: Arial
    - id: Power
      opposite: false
      decimals: 0
      apex_config:
        axisBorder:
          show: true
          color: darkblue
        axisTicks:
          show: true
          color: darkblue
        title:
          text: Power
          style:
            color: forestgreen
            fontSize: 16
            fontWeight: 600
            fontFamily: Arial
  all_series_config:
    type: area
    extend_to: false
    float_precision: 0
  series:
    - color: greenyellow
      entity: sensor.pv_energy
      name: Energy
      yaxis_id: Energy
      type: area
      stroke_width: 2
      unit: Wh
      show:
        name_in_header: true
        legend_value: false
        extremas: false
      group_by:
        func: max
        duration: 5 mins
    - color: forestgreen
      entity: sensor.pv_power
      name: Power
      yaxis_id: Power
      type: line
      stroke_width: 2
      unit: Wh
      show:
        name_in_header: true
        legend_value: false
        extremas: true
      group_by:
        func: max
        duration: 5 mins