color_threshold question

[EdDickens]

Trying to make a chart where the line color varies based on the value. I have this working in a mini-graph-card but can't get the same effect in an apex chart. I'm not sure if I'm missing something in the chart config or misunderstanding what the "color_threshold" feature does. I know this is an experimental feature so maybe it's just not working correctly yet?

Here's the code for the mini-graph-card.

type: custom:apexcharts-card
experimental:
  color_threshold: true
chart_type: line
header:
  show: true
  title: PM 2.5µm 1 Hour AQI
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 3
  min: 0
  max: 100
series:
  - entity: sensor.pm2_5um_1_hour_aqi
    yaxis_id: PPM2.5
    color_threshold:
      - value: 0
        color: '#00ff00'
      - value: 25
        color: '#ffff00'
      - value: 50
        color: '#ff8000'
      - value: 100
        color: '#ff0000'
      - value: 300
        color: '#800000'
    show:
      extremas: true
      header_color_threshold: true

The chart on the left shows how I think it should look. But you can see what I'm actually getting. Interestingly the text color of the 'State' value does track with the value/color pairs due to the "colorize_states: true" key. So it seems it's kind of working but not completely.

[EdDickens]

Try adding "fill_raw: last" to the 'Series>Entity' parameters.

[EdDickens]

Thanks. That seems to have done the trick.

type: custom:apexcharts-card
experimental:
  color_threshold: true
chart_type: line
header:
  show: true
  title: PM 2.5µm 1 Hour AQI
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 3
  min: 0
  max: 100
series:
  - entity: sensor.pm2_5um_1_hour_aqi
    yaxis_id: PPM2.5
    fill_raw: last
    color_threshold:
      - value: 0
        color: '#00ff00'
      - value: 25
        color: '#ffff00'
      - value: 50
        color: '#ff8000'
      - value: 100
        color: '#ff0000'
      - value: 300
        color: '#800000'
    show:
      extremas: true
      header_color_threshold: true