color graphs

[Mariusthvdb]

just a suggestion that might make the graph a bit more impactful, I've set some arbitrary colors in the experimental mode:

  - type: custom:apexcharts-card
    graph_span: 24h
    span:
      start: day
    now:
      show: true
      label: Now
    header:
      show: true
      title: Entso-e prijzen Vandaag (€/kwh)
    experimental:
      color_threshold: true

    series:
      - entity: sensor.entsoe_current_electricity_market_price
        color_threshold:
          - value: 0.05
            color: lightgreen
          - value: 0.1
            color: green
          - value: 0.15
            color: orange
          - value: 0.2
            color: darkorange
          - value: 0.25
            color: black
          - value: 0.3
            color: purple
          - value: 0.35
            color: maroon
          - value: 0.4
            color: red
        stroke_width: 2
        float_precision: 3
        type: column
        opacity: 1

[ikke-zelf]

Great to see and thanks...
What even be more useful would be to have a percentage value. In that way you can color the bars compared against let's say the percentage of the average that day (cause not every day the min/max of that day is the same.)

[Mariusthvdb]

o that might be cool indeed. No clue yet how to try that in Apex though, I am not that savvy with the card yet.
Would you know how to do so?

[ikke-zelf]

I tried when the card was working before but did not yet succeed. am not sure if it's feasible.

[ikke-zelf]

just a suggestion that might make the graph a bit more impactful, I've set some arbitrary colors in the experimental mode:

  - type: custom:apexcharts-card
    graph_span: 24h
    span:
      start: day
    now:
      show: true
      label: Now
    header:
      show: true
      title: Entso-e prijzen Vandaag (€/kwh)
    experimental:
      color_threshold: true

    series:
      - entity: sensor.entsoe_current_electricity_market_price
        color_threshold:
          - value: 0.05
            color: lightgreen
          - value: 0.1
            color: green
          - value: 0.15
            color: orange
          - value: 0.2
            color: darkorange
          - value: 0.25
            color: black
          - value: 0.3
            color: purple
          - value: 0.35
            color: maroon
          - value: 0.4
            color: red
        stroke_width: 2
        float_precision: 3
        type: column
        opacity: 1

where did you copy your code from? This due to the fact that the indentation is giving errors on my end if I copy it in the apex-chard card.

[blowk]

The data generated part is used, but wasn't showed.

Here is the full example.

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
now:
  show: true
  label: Now
header:
  show: true
  title: Electriciteitsprijzen Vandaag (€/kwh)
experimental:
  color_threshold: true
series:
  - entity: sensor.current_electricity_market_price
    stroke_width: 2
    float_precision: 3
    type: column
    opacity: 1
    color: ''
    color_threshold:
      - value: 0.05
        color: lightgreen
      - value: 0.1
        color: green
      - value: 0.15
        color: orange
      - value: 0.2
        color: darkorange
      - value: 0.25
        color: black
      - value: 0.3
        color: purple
      - value: 0.35
        color: maroon
      - value: 0.4
        color: red
    data_generator: |
      return entity.attributes.prices_today.map((record, index) => {
        return [record.time, record.price];
      });

[Mariusthvdb]

sorry bout that, I posted the full config in another topic/issue probably.

  - type: entities
    entities:
    - type: custom:config-template-card
      entities:
        - input_select.apex_span_hours
      variables:
        span_hours: states['input_select.apex_span_hours'].state
      card:

        type: custom:apexcharts-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -8px -16px -16px -16px;
              padding: 0;
            }
        graph_span: ${span_hours}
        span:
          start: day
        now:
          show: true
          label: Now
        header:
          show: true
          title: Entso-e prijzen Vandaag (€/kwh)
        experimental:
          color_threshold: true
        yaxis:
          - decimals: 2
#             apex_config:
#               tickAmount: 8
        series:
          - entity: sensor.entsoe_current_electricity_market_price
            color_threshold:
              - value: 0.05
                color: lightgreen
              - value: 0.1
                color: green
              - value: 0.15
                color: orange
              - value: 0.2
                color: darkorange
              - value: 0.25
                color: black
              - value: 0.3
                color: purple
              - value: 0.35
                color: maroon
              - value: 0.4
                color: red
            stroke_width: 2
            float_precision: 3
            type: column
            opacity: 1
            data_generator: |
              return entity.attributes.prices_today.map((record, index) => {
                return [record.time, record.price];
              });

    - input_select.apex_span_hours

this is all I have ;-) including the selectable span in the frontend

[ikke-zelf]

create a second graph and set the graph span to 48h.
the 2nd graph should look to: entity.attributes.prices_**tomorrow.**map

[ikke-zelf]

where did you define that input.select_apex_span_hours?

[Mariusthvdb]

in the Helpers UI.

[katla50]

[elRadix]

@katla50 can you format your config please so that's usable, thank you

[ikke-zelf]

Tried the suggestion by karla and posted in new thread