I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10

I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10

• apexcharts
• home-assistant

1 Answer 1

I found this to be an interesting use case, so I gave it a try. Since I don't currently have a similar entity available, I used the precipitation probability from the forecast of a weather entity. But that shouldn't matter if you replace the entity and make small code adjustments.

Card Configuration

With the help of the config-template-card*, I calculated the threshold values dynamically and used the results as the value for the color.

type: custom:config-template-card
variables:
  ENTITY_NAME: "'sensor.weather_home_forecast_hourly'"
  STATES: states['sensor.weather_home_forecast_hourly']?.attributes?.forecast
  ATTRIBUTE_NAME: "'precipitation_probability'"
  calcThresholdValue: |
    ((objects, valueKey, totalColors, colorIndex) => {
      if (!objects || !Array.isArray(objects)) {
        console.error("Invalid objects:", objects);
        return null;
      }
      const values = objects.map(obj => obj[valueKey]).filter(v => v !== undefined && v > 0);
      if (values.length === 0) {
        console.error("No valid values found:", values);
        return null;
      }

      const minValue = Math.min(...values);
      const maxValue = Math.max(...values);
      const interval = (maxValue - minValue) / (totalColors + 1);
      const threshold = Math.floor(minValue + (interval * colorIndex));
     
      return threshold;
    })
entities:
  - ${ENTITY_NAME}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  experimental:
    color_threshold: true
  header:
    title: Precipitation Probability
    show: true
  span:
    start: hour
  now:
    show: true
    color: gray
    label: Now
  series:
    - entity: ${ENTITY_NAME}
      type: column
      color: gray
      show:
        extremas: true
      color_threshold:
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 6)}
          color: red
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 5)}
          color: orange
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 4)}
          color: gold
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 3)}
          color: yellow
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 2)}
          color: green
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 1)}
          color: lightgreen
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 0)}
          color: blue
      float_precision: 2
      data_generator: |
        return entity.attributes.forecast
          .map(values => {
            return [new Date(values.datetime).getTime(), values['precipitation_probability']];
          });
  yaxis:
    - decimals: 2
      apex_config:
        tickAmount: 10

You need to adjust the values of ENTITY_NAME, STATES, ATTRIBUTE_NAME and the data_generator.

Issues (and possible solutions)

• An additional custom card is needed
• config-template-card is maybe not that efficient (yet)?
• The columns are not colored by day, but by the minimum and maximum of the entire displayed data. Currently, I have no idea how to cleverly implement a day-specific color scheme. Perhaps two charts next to each other, one for today and one for tomorrow, would be an option for you?
• I couldn't get the variables from the config-template-card to work with data_generator of the apexcharts-card

* I am not affiliated with this package in any way.