ApexChart, color_treshold shows only green and yellow

Configuration Frontend
1

Hi there,

where I have to put color treshold in this code? I’d like to make it more dynamic.

type: custom:apexcharts-card
now:
  show: true
  label: Nyt
graph_span: 48h
apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 0.1987
        strokeDashArray: 0
        borderColor: green
        borderWidth: 0
  chart:
    height: 300px
  legend:
    showForSingleSeries: true
  plotOptions:
    bar:
      borderRadius: 2
  yaxis:
    decimalsInFloat: 2
    tickAmount: 10
    forceNiceScale: true
  xaxis:
    labels:
      datetimeFormatter:
        hour: HH
all_series_config:
  show:
    offset_in_name: false
header:
  title: ' '
  show: true
  show_states: true
  colorize_states: true
span:
  start: day
  offset: +0h
series:
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    type: column
    color: green
    float_precision: 4
    stroke_width: 2
    name: Tuntihinta
    show:
      in_header: false
      legend_value: false
      extremas: true
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    type: column
    color: yellow
    float_precision: 4
    stroke_width: 2
    name: Hinta huomenna
    show:
      in_header: false
      legend_value: false
      extremas: true
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {

        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];

      });
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    name: Tuntihinta nyt
    color: green
    type: column
    show:
      in_chart: false
    float_precision: 4
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    attribute: average
    type: column
    color: pink
    float_precision: 4
    stroke_width: 2
    name: Päivän keskihinta tänään
    group_by:
      duration: 2d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    attribute: max
    type: column
    color: orange
    float_precision: 4
    stroke_width: 2
    name: Korkein hinta
    group_by:
      duration: 2d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    attribute: min
    type: column
    color: green
    float_precision: 4
    stroke_width: 2
    name: Alin hinta tänään
    group_by:
      duration: 2d
    show:
      in_chart: false
      legend_value: false

image
image870×425 25.7 KB

2

here are the docs:

This is an example from it:

type: custom:apexcharts-card
experimental:
  color_threshold: true
series:
  - entity: sensor.temperature
    color_threshold:
      - value: -10
        # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
        # default is: the default color of the serie
        color: blue
        # optional opacity, value from 0 to 1.
        # only for line and area
        # Default is 1 for 'type: line' and 0.7 for `type: area`
        opacity: 1
      - value: 0
        color: cyan
      - value: 15
        color: green
      - value: 25
        color: orange

I think it can also go under all_series_config:` like this:

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  color_threshold:
    - value: -10
      color: blue
      opacity: 1
    - value: 0
      color: cyan
    - value: 15
      color: green
    - value: 25
      color: orange
series:
  - entity: sensor.temperature
  - ...