Color threshold apex chart graph

Configuration Frontend
1

Hello everybody!

I have problems with the color threshold in my graph - I would like to have the negative values red and the positive green. It looks like this:

Bildschirmfoto 2022-02-06 um 13.54.16
Bildschirmfoto 2022-02-06 um 13.54.16489×307 29.4 KB

here is my configuration:

type: custom:apexcharts-card
graph_span: 5h
header:
  show: false
  title: Energie
  show_states: true
  colorize_states: true
series:
  - entity: sensor.template_ueberschuss_bezug
    type: area
    curve: smooth
    name: Überschuss/Bezug
    color: black
    color_threshold:
      - value: -1
        color: red
      - value: 0
        color: green
    stroke_width: 0
    opacity: 1
apex_config:
  legend:
    show: false
  height: 245
experimental:
  color_threshold: true

any ideas?

2

Try invert: true

like below

series:
  - entity: sensor.template_ueberschuss_bezug
    type: area
    invert: true
3

I have a similar problem, negative values aren’t colored at all. Is there a fix for this?

image
image2046×1298 113 KB

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
now:
  show: true
  label: Nu
header:
  show: false
  title: Stroomprijs vandaag (€/kWh)
  show_states: false
  colorize_states: false
experimental:
  color_threshold: true
  disable_config_validation: true
series:
  - entity: sensor.average_electricity_price
    name: All-in prijs
    show:
      legend_value: false
    stroke_width: 2
    float_precision: 3
    type: area
    curve: stepline
    opacity: 0.8
    color: ""
    color_threshold:
      - value: -0.15
        color: blue
      - value: -0.1
        color: mediumblue
      - value: -0.05
        color: darkblue
      - value: 0
        color: lightgreen
      - value: 0.05
        color: green
      - value: 0.1
        color: darkgreen
      - value: 0.15
        color: yellow
      - value: 0.2
        color: gold
      - value: 0.25
        color: orange
      - value: 0.3
        color: darkorange
      - value: 0.35
        color: orangered
      - value: 0.4
        color: red
    data_generator: |
      return entity.attributes.prices.map((record, index) => {
        return [record.time, record.price];
      });
  - entity: sensor.average_electricity_price
    name: All-in prijs (gemiddeld)
    show:
      legend_value: false
    stroke_width: 1
    float_precision: 3
    type: line
    curve: stepline
    stroke_dash: 3
    opacity: 0.8
    color: ""
    data_generator: |
      const gemiddelde_all_in_prijs =
      parseFloat(hass.states['sensor.average_electricity_price'].state);
      return entity.attributes.prices.map((record, index) => {
        return [record.time,gemiddelde_all_in_prijs];
      });
  - entity: sensor.average_electricity_price
    name: Terugleververgoeding
    show:
      legend_value: false
    stroke_width: 2
    stroke_dash: 1
    float_precision: 3
    type: line
    curve: stepline
    opacity: 0.8
    color: ""
    data_generator: >
      const btw = parseFloat(hass.states['input_text.btw'].state); const
      energiebelasting =
      parseFloat(hass.states['input_text.energiebelasting'].state); const
      inkoopvergoeding =
      parseFloat(hass.states['input_text.inkoopvergoeding'].state); const
      inkoopvergoeding_terugleververgoeding =
      parseFloat(hass.states['input_text.inkoopvergoeding_teruglevering'].state);
      return entity.attributes.prices.map((record, index) => {
        return [record.time, ((record.price-(record.price*((btw-1)/btw))-inkoopvergoeding-energiebelasting)-inkoopvergoeding_terugleververgoeding+energiebelasting)*btw];
      });
  - entity: sensor.average_electricity_price
    name: Marktprijs
    show:
      legend_value: false
    stroke_width: 2
    stroke_dash: 1
    float_precision: 3
    type: line
    curve: stepline
    opacity: 0.8
    color: ""
    data_generator: |
      const btw = parseFloat(hass.states['input_text.btw'].state); const
      energiebelasting =
      parseFloat(hass.states['input_text.energiebelasting'].state); const
      inkoopvergoeding =
      parseFloat(hass.states['input_text.inkoopvergoeding'].state);
      return entity.attributes.prices.map((record, index) => {
        return [record.time, record.price-(record.price*((btw-1)/btw))-inkoopvergoeding-energiebelasting];
      });
yaxis:
  - decimals: 2
    align_to: 0.05
grid_options:
  columns: full
4

Read other posts… why do you need that?
Start small with the part that does not work

5

That’s not the problem, it’s needed for the new grid options:

grid_options:
  columns: full

Doesn’t support layout_options option in sections panel (Home Assistant v2024.7) · Issue #736 · RomRider/apexcharts-card

6

And it also hides config issues so you may be hiding more than you think … Are saying that without this option and without grid-stuff you have no errors?
Possibly add fill_raw: last

EDIT: and make a copy to work only on the bugging entity, there is too much in the code which can possibly influence one another

7

That’s indeed what I’m implying. :slightly_smiling_face:
I had assumed that ‘fill_raw: last’ wouldn’t be beneficial when using ‘data_generator’, though I’m unsure where that assumption came from.

8

This whole thing is experimental and when I see issues, I add fill_raw and this ‘often’ works.
Also noticed that it is sensitive for the order and value…
e.g. repeating the value gives (finally: for me) not the unwanted (for me) gradient, see below
Anyhow, I always reduce to the single thing giving headaches and usually I get somewhere, but the whole thing remains tricky

image
image1065×471 22.2 KB

9

‘fill_raw: last’ doesn’t fix (or change) my graph.