ApexCharts suddenly displays more than 10 significant digits crowding out graph

Been using ApexCharts for months. Suddenly (maybe after an upgrade) one of the charts displays axis values with about 16 digits past the decimal point. These long values are this way on both the left and right side of the chart. The chart is so crowed that it is difficult to see trends (only occupies about 30% of the card space). The number at the top of the card are display as expected. A value (temperature, humidity, ect) followed by 1 significant digit past the decimal point.

I have just a few sensors with the same behavior, not just in Apex, since I moved to 2025.7.0 … I did not read the doc syet but setting the disply precision on the sensor to 1 or 2 digits changes nothing…suggest that you check the issue log on github for HA

There is a discussion re this in the blog topic for 2025.7. Looks like the change is permanent and won’t be fixed.

I msiread your post, can you add the yaml properly formatted below?

I just happened upon a fix. I added the line:

decimalsInFloat: 1

…to the script and the y axis number changed to only 1 digit after the decimal point.

I did this for all the different values listed above. But it looks like you only need to add it to the 1st value for the right and left sides of the y axis.

I don’t do this in other ApexCharts and they still look fine. Not sure why this particular card suddenly defaulted to something like 16 digits after the decimal point.

I found many of the ApexCharts attributes here on this page. I was searching for how to change the amount of time displayed on the x axis and saw that there were attributes to control how numbers are displayed.

This still does not help to define what you did and why you needed this. Post the old/non-working code too so others can benefit

Sorry, I still think I’m new to HAOS and often come across instructions that leave me thinking “I’ve just not been around the block yet”. Also, I tend to get it the weeds too easily. So, I thought I had left just enough to help others.

I made the following code changes:

I changed this segment of YAML:

  yaxis:
    - min: 0
      max: 100
      decimalsInFloat: 1
      title:
        text: Temperature

To this:

  yaxis:
    - min: 0
      max: 100
      title:
        text: Temperature

You have seen the image above where too many significant digits crowd out the graph. Here’s the same ApexChart after the code change:

Ah, I should add that I also had to make the same exact code change for the Humidity side of the chart so that the numbers on the right also contained a reasonable number of significant digits.

You should post the whole code…from what I see you are using two axis and decimalsInFloat is only allowed in the apex_config part. Configuring yaxis both in apex_config as well as separate ones likely leads to issues.

Looking over this, it appears the “title: test:” section of anything but the 1st entry for either the left or right side are ignored. I don’t think it hurts. And if the data order is shifted around it’s nice to have them previously defined.

type: custom:apexcharts-card
header:
  show: true
  title: Stair Temperature
  show_states: true
  colorize_states: true
series:
  - entity: sensor.stairs_temperature
    name: Ceiling Fan Temperature
  - entity: sensor.nspanel1_temperature
    name: Front Hallway Temperature
  - entity: sensor.stairs_humidity
    name: Ceiling Fan Humidity
  - entity: sensor.stair_temp_diff
    name: Temperature Difference
  - entity: fan.stairs
    name: Ceiling Fan On/Off
    transform: "return x == 'on' ? 1 : 0;"
    type: area
    curve: stepline
    stroke_width: 0
apex_config:
  legend:
    show: false
  yaxis:
    - min: 0
      max: 100
      decimalsInFloat: 1
      title:
        text: Temperature
    - show: false
      min: 0
      max: 100
      title:
        text: Temperature Down Stairs
    - show: false
      min: 0
      max: 100
      title:
        text: Temperature Difference
    - min: 0
      max: 100
      decimalsInFloat: 1
      opposite: true
      title:
        text: Humidity
    - show: false
      min: 0
      max: 1
      opposite: true
      title:
        text: Fan On/Off

You are aware that this is not the ‘normal’ way to setup multiple yaxis as you have no clue which data belongs where. Only because you use 0-100 for both, it makes no difference.
RomRider/apexcharts-card: :chart_with_upwards_trend: A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant

I’m game for learning. (FWIW, I’m still in the “make HAOS” useful stage. And am only now entering the “clean it up” phase.)

I looked at the examples in the link and think I have cleaned up the YAML. But in doing so, I’ve lost the labels on the left and right side of the graph. Which makes it hard to read. Also, I need to rethink how to display the state of the fan. I can’t believe I’m the only one who would like to over lay sensor data like temperature with the states of, say, the HVAC system.

YAML:

type: custom:apexcharts-card
header:
  show: true
  title: Stair Temperature
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false

#   yaxis:
#     - id: first
#       title:
#         text: Temperature
#       decimalsInFloat: 1
#     - id: second
#       title:
#         text: Humidity
#       decimalsInFloat: 1
#       opposite: true

yaxis:
  - id: first
    decimals: 1
  - id: second
    decimals: 1
    opposite: true

all_series_config:
  stroke_width: 2
series:
  - entity: sensor.stairs_temperature
    name: Ceiling Fan Temperature
    yaxis_id: first
  - entity: sensor.nspanel1_temperature
    name: Front Hallway Temperature
    yaxis_id: first
  - entity: sensor.stairs_humidity
    name: Ceiling Fan Humidity
    yaxis_id: second
  - entity: sensor.stair_temp_diff
    name: Temperature Difference
    yaxis_id: first
  - entity: fan.stairs
    name: Ceiling Fan On/Off
    transform: "return x == 'on' ? 1 : 0;"
    type: area
    curve: stepline
    stroke_width: 0
    yaxis_id: first

This results in this HAOS panel:

If I comment out the second “yaxis:” YAML code and uncomment the first, then I get this HAOS panel:

I get my left and right of the graph labels back. But the data is messed up. Near as I can tell, everything is now using the scale on the left (was expecting all temperature data and fan state to use the scale on the left) and the Ceiling Fan Temperature is using the scale on the right (was expecting it to use the scale on the left)

So I’m still looking for a solution for both the labels and for laying events over the plots of data.

-thanks

The way to do so is like this example(!)…it is not easy or ux by far this apex…and you should spend time on the main post which does mean a lot (!) of searching but then also learning :slight_smile:

yaxis:
  - id: temp
    min: 0
    max: 40
    apex_config:
      title:
        text: temperature

ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community

That works!
I have several other HAOS charts. All of which could benefit from these changes.
Thanks.