Y axis not scaling correctly

PalleRaa commented 2 months ago

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 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 commented 1 month ago

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 commented 1 month ago

gcoan commented 1 month ago

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 commented 1 month ago

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

RomRider / apexcharts-card

Y axis not scaling correctly #773