Incorrect Rendering Of Column Borders With Color_thresholds On Versions >2.1.2

Apr 20, 2025 by ADMIN 79 views

Introduction

The Apexcharts card in Home Assistant is a highly customizable graph card that allows users to create a wide range of visualizations. However, with the release of versions 2.1.0 and above, a bug has been introduced that affects the rendering of column borders with color thresholds. In this article, we will explore the issue, provide a checklist to help users diagnose the problem, and offer a solution to fix the incorrect rendering of column borders.

Checklist

Before we dive into the solution, let's go through the checklist to ensure that we have tried all possible solutions:

Updated the card to the latest version available: Make sure you are running the latest version of the Apexcharts card.
Cleared the cache of my browser: Clearing the browser cache can sometimes resolve issues related to outdated or corrupted data.
Verified that I'm really running the latest version in my browser console: Double-check that you are running the latest version of the card by checking the version number in the browser console.
Checked if there is another issue opened with the same problem: It's possible that someone else has already reported the issue, so it's worth checking the community forums to see if anyone else is experiencing the same problem.

Describe the Bug

The bug affects column charts with color thresholds when upgrading from version 2.0.4 to 2.1.0 or above. Each column now has a fixed gray border, which messes up the intended look. The problem is even worse on more dense charts, as the border color completely overlaps the desired fill color.

Version of the Card

The version of the card that is affected by this bug is 2.1.2.

To Reproduce

To reproduce the issue, you can use the following configuration:

type: "custom:apexcharts-card"
graph_span: 1 days
header:
  show_states: false
  colorize_states: true
span:
  start: day
  offset: -1day
experimental:
  color_threshold: true
series:
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    transform: "return x * 100"
    name: foo
    yaxis_id: foo
    stroke_width: 4
    opacity: 0.8
    type: column
    unit: "snt/kWh"
    time_delta: +1h
    group_by:
      func: avg
      duration: 60min # sample size
    color_threshold:
      - value: -1
        color: 00A000 #green
      - value: 8
        color: 1E90FF #blue
      - value: 16
        color: DAA520 #yellow
      - value: 24
        color: FF0000 #red
apex_config:
  yaxis:
    - id: foo
      min: 0
      max: 60
      decimalsInFloat: 0
      show: true
  legend:
    show: false
  tooltip:
    enabled: false

Screenshots

Here are some screenshots that demonstrate the:

Version 2.0.4:
Version 2.1.x:

Expected Behavior

The expected behavior is that the image produced with version 2.0.4 is displayed.

Desktop (Please Complete the Following Information)

Browser: Chrome, Safari
Version: 135, 18.3

Smartphone (Please Complete the Following Information)

Device: iPhone 13
OS: iOS 18.3.2

Additional Context

For more information about the Apexcharts card and its customization options, please refer to the following community forums:

Solution

To fix the incorrect rendering of column borders with color thresholds, you can try the following solution:

Downgrade to version 2.0.4: If you are experiencing the issue, try downgrading to version 2.0.4 to see if the problem is resolved.
Update to the latest version: If you are running an older version of the card, try updating to the latest version to see if the issue is resolved.
Customize the card configuration: If the issue persists, try customizing the card configuration to see if you can resolve the issue.

Q: What is the issue with column borders with color thresholds on versions >2.1.2?

A: The issue is that each column now has a fixed gray border, which messes up the intended look. The problem is even worse on more dense charts, as the border color completely overlaps the desired fill color.

Q: What is the expected behavior?

A: The expected behavior is that the image produced with version 2.0.4 is displayed.

Q: What are the system requirements for this issue?

A: The system requirements for this issue are:

Browser: Chrome, Safari
Version: 135, 18.3
Device: iPhone 13
OS: iOS 18.3.2

Q: How do I reproduce the issue?

A: To reproduce the issue, you can use the following configuration:

type: "custom:apexcharts-card"
graph_span: 1 days
header:
  show_states: false
  colorize_states: true
span:
  start: day
  offset: -1day
experimental:
  color_threshold: true
series:
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    transform: "return x * 100"
    name: foo
    yaxis_id: foo
    stroke_width: 4
    opacity: 0.8
    type: column
    unit: "snt/kWh"
    time_delta: +1h
    group_by:
      func: avg
      duration: 60min # sample size
    color_threshold:
      - value: -1
        color: 00A000 #green
      - value: 8
        color: 1E90FF #blue
      - value: 16
        color: DAA520 #yellow
      - value: 24
        color: FF0000 #red
apex_config:
  yaxis:
    - id: foo
      min: 0
      max: 60
      decimalsInFloat: 0
      show: true
  legend:
    show: false
  tooltip:
    enabled: false

Q: What are the possible solutions to this issue?

A: The possible solutions to this issue are:

Downgrade to version 2.0.4: If you are experiencing the issue, try downgrading to version 2.0.4 to see if the problem is resolved.
Update to the latest version: If you are running an older version of the card, try updating to the latest version to see if the issue is resolved.
Customize the card configuration: If the issue persists, try customizing the card configuration to see if you can resolve the issue.

Q: Where can I find more information about the Apexcharts card and its customization options?

A: For more information about the Apexcharts card and its customization options, please refer to the following community forums:

Q: How can I report a bug or issue with the Apexcharts card?

A: If you encounter a bug or issue with the Apexcharts card, please report it to the Home Assistant community forums. Provide as much detail as possible, including the version of the card, the configuration you are using, and any error messages you may be seeing. This will help the developers to identify and fix the issue.