Dynamic color_threshold for ApexCharts

[Tonkin (Rune Bay)]

I want to highlight the hours with the lowest prices for the next days to plan EV charging. I have calculated the lowest price based of remaining battery (%), battery capacity (74kwh) and my charger efficency (11kw), but in custom:apexcharts-card I can only set the values as hard coded integers.

type: custom:apexcharts-card
apex_config:
  chart:
    height: 400px
experimental:
  color_threshold: true
graph_span: 24h
header:
  title: Elpriser pr. time (kr/kWh)
  show: true
span:
  start: hour
  offset: '-2h'
now:
  show: true
  label: Nu
yaxis:
  - min: 0.75
    apex_config:
      tickAmount: 2
series:
  - entity: sensor.elspotpris
    type: column
    data_generator: |
      var tt = 1;
      var today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["hour"]).getTime(), 
        entity.attributes.raw_today[index]["price"] * 1];
      });
      if (entity.attributes.tomorrow_valid) {
        var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
          return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
        });

        var data = today.concat(tomorrow);
      } else {
        var data = today
      }
      return data;
    float_precision: 2
    color_threshold:
      - value: 0
        color: green
      - value: 2.04
        color: red

Best regards
/Tonkin

[complex1 (Frank)]

To achieve what you want, I think you have to use the custom “Config Template Card” card and create a card something like this:

type: custom:config-template-card
variables:
  - '"sensor.elspotpris"'
  - <calculate the lowest price>
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  [...]
  series:
    - entity: ${vars[0]}
      type: column
      [...]
      float_precision: 2
      color_threshold:
        - value: 0
          color: green
        - value: ${vars[1]}
          color: red

[dezito]

Did u manage to get this to work

[Tonkin (Rune Bay)]

No! I had no luck with the suggested code.

[M4tthijs]

@Tonkin @dezito Had a similar problem, here’s my solution:

I managed this by creating four variables with a calculated threshold value for each color to show in the graph:

type: custom:config-template-card
variables:
  - >-
    (((states['sensor.tibber_highest_energy_price_today'].state -
    states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 0) +
    Number(states['sensor.tibber_lowest_energy_price_today'].state)
  - >-
    (((states['sensor.tibber_highest_energy_price_today'].state -
    states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 1) +
    Number(states['sensor.tibber_lowest_energy_price_today'].state)
  - >-
    (((states['sensor.tibber_highest_energy_price_today'].state -
    states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 2) +
    Number(states['sensor.tibber_lowest_energy_price_today'].state)
  - >-
    (((states['sensor.tibber_highest_energy_price_today'].state -
    states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 3) +
    Number(states['sensor.tibber_lowest_energy_price_today'].state)

Then I was able to use them inside the custom:apexcharts-card :

series:
    - entity: sensor.tibber_average_electricity_price_today
      show:
        in_header: false
      stroke_width: 2
      float_precision: 3
      type: column
      color_threshold:
        - value: ${vars[0]}
          color: '#42a047'
        - value: ${vars[1]}
          color: '#ffa600'
        - value: ${vars[2]}
          color: '#ff7100'
        - value: ${vars[3]}
          color: '#db4437'

result:

[Ildar_Gabdullin]

Placing apexcharts inside CTC:

• either the graph is not updated real-time since a sensor is not declared as monitored;
• or the whole card is redrawn every time the sensor is changed - otherwise.

[Tonkin (Rune Bay)]

I got it working with the following code! Thanks!!

type: custom:config-template-card
variables:
  - '"sensor.elspotpris"'
  - Number(states['sensor.smart_charge_target_price'].state)
  - >-
    String('Charging at ' + states['sensor.smart_charge_target_price'].state + '
    kr/kWh')
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  apex_config:
    chart:
      height: 400px
  experimental:
    color_threshold: true
  graph_span: 24h
  header:
    title: ${vars[2]}
    show: true
  span:
    start: hour
    offset: '-2h'
  now:
    show: true
    label: Nu
  yaxis:
    - min: 0.75
      apex_config:
        tickAmount: 2
  series:
    - entity: ${vars[0]}
      type: column
      data_generator: |
        var tt = 1;
        var today = entity.attributes.raw_today.map((start, index) => {
          return [new Date(start["hour"]).getTime(), 
          entity.attributes.raw_today[index]["price"] * 1];
        });
        if (entity.attributes.tomorrow_valid) {
          var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
          });

          var data = today.concat(tomorrow);
        } else {
          var data = today
        }
        return data;
      float_precision: 2
      color_threshold:
        - value: 0
          color: green
        - value: ${vars[1]}
          color: red

[larsvanbeek1997]

Hi,

can you please share the full code.

I dont understand:? you posted 2 codes for 2 diffrent cards?

Do you mind making a full instruction I am new in Home assistant. ( I have tibber and nordpol both installed)