Set the color of Apex chart dynamic

Hi.

I´m trying to set the color in the apex chart dependent if the average value is below or above the current value.
I have not got it to work.
The code I been playing with so far is:

type: custom:apexcharts-card
graph_span: 48h
header:
  title: Elpris (kr/kWh)
  show: true
experimental:
  color_threshold: false  # Disable color thresholds entirely
all_series_config:
  stroke_width: 1

apex_config:
  responsive:
    - breakpoint: 400
      options:
        chart:
          height: 200px
    - breakpoint: 800
      options:
        chart:
          height: 400px
    - breakpoint: 10000
      options:
        chart:
          height: 500px

span:
  start: day
now:
  show: true
  label: Just nu
  color: fff700  # Yellow for the "current" label

series:
  - entity: sensor.nordpool_kwh_se4_sek_2_10_025
    type: column
    curve: stepline
    float_precision: 3
    extend_to: now
    data_generator: |
      let td = entity.attributes.raw_today;
      let tm = entity.attributes.raw_tomorrow;
      
      // Helper function to repeat the last data point for continuous charting
      const repeatLast = (x) => [new Date(x.at(-1)[0]).getTime() + 3600000, x.at(-1)[1]];

      let dataset = [
        ...td.map((data, index) => {
          return [data["start"], data["value"]];
        }),
        ...tm.map((data, index) => { 
          return [data["start"], data["value"]];
        })
      ];

      // Return the data with the last point repeated to extend the chart to the current time
      return [...dataset, repeatLast(dataset)];

    # Dynamically set the color based on the "Average" attribute
    color: >
      const currentValue = parseFloat(entity.state);  # Current value of the entity
      const AverageValue = parseFloat(entity.attributes.average);  # "average" attribute value

      console.log("current Value:", currentValue);
      console.log("average Value:", averageValue);

      if (currentValue < AverageValue) {
        return "37FF00";  # Green if the current value is less than the Average
      }

      return "FF0033";  # Red if it's not below Average

1 post - 1 participant

Read full topic