ApexCharts card - A highly customizable graph card

[vandermark (Bart van der Mark)]

I am struggling with the ‘update_interval’ setting:
Where in my config should i put this setting in the following card:

type: custom:config-template-card
variables:
  - states['input_select.hours_to_show_2'].state
entities:
  - input_select.hours_to_show_2
  - sensor.electricity_meter_power_consumption
  - sensor.electricity_meter_power_production
  - sensor.electricity_meter_power_production_phase_l1
  - sensor.pana_vermogen_kw
card:
  type: custom:apexcharts-card
  apex_config:
    chart:
      height: 450%
  header:
    show: true
    title: Electra
  all_series_config:
    stroke_width: 1
  graph_span: ${vars[0]}
  series:
    - entity: sensor.electricity_meter_power_consumption
      name: Afname Totaal
      color: orange
      curve: stepline
      fill_raw: zero
    - entity: sensor.electricity_meter_power_production
      name: Productie Totaal
      color: 76c0f5
      curve: stepline
    - entity: sensor.electricity_meter_power_production_phase_l1
      name: Productie Fase 1
      color: green
      curve: stepline
    - entity: sensor.pana_vermogen_kw
      name: Warmtepomp
      color: f07b73
      curve: stepline
  yaxis:
    - min: 0
      max: ~3
      decimals: 1
      apex_config:
        tickAmount: 15
        forceNiceScale: true

[AngeloA]

Is there a way to change the date format on the xaxis from day/month to month/day as is customary in the US?

[Mister.Gatti (Daniele)]

Good morning,
I noticed that when apexcharts updates, the screen freezes for a few seconds.
Is there a solution?

[sonite]

I will be super transparent.My exploration of HA’s capabilities is just beginning, having installed it for the first time yesterday. I’ve successfully learned to install HAC, Nordpool, config-custom-cards and Apexchart-cards, e.g Newbie. I possess limited knowledge on fetching data, markup, and related aspects. However, onto my inquiry: I’ve achieved graph colorization using two colors. Yet, these colors tend to vary from hour to hour, rather than remaining fixed. Why does this occur?

type: custom:config-template-card
variables:
  - '"sensor.nordpool_kwh_se3_sek_3_10_0"'
  - Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].state)
  - >-
    String('Current price ' + states['sensor.nordpool_kwh_se3_sek_3_10_0'].state
    + ' kr/kWh')
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  graph_span: 36h
  hours_12: false
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: Now
  series:
    - entity: ${vars[0]}
      type: column
      float_precision: 3
      data_generator: >
        return (entity.attributes.raw_today.map((start, index) => { 

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

        })).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
        [new Date(start["start"]).getTime(),
        entity.attributes.raw_tomorrow[index]["value"]]; }));
      show:
        extremas: true
        header_color_threshold: true
      color_threshold:
        - value: 0
          color: green
        - value: ${vars[1]}
          color: red
  yaxis:
    - decimals: 2
  apex_config:
    tickAmount: 10

[sonite]

Perhaps someone has managed to achieve the following, its actually how I want it to be (Ofc to highlight super intuitive what costly hours to avoid)

[sonite]

Fiddeling with the code provided by @M4tthijs over at: https://community.home-assistant.io/t/dynamic-color-threshold-for-apexcharts/610838/3 i’ve manage to solve my own question with the following code-snippet:

type: custom:config-template-card
variables:
  - '"sensor.nordpool_kwh_se3_sek_3_10_0"'
  - Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].state)
  - >-
    String('Current price ' + states['sensor.nordpool_kwh_se3_sek_3_10_0'].state
    + ' kr/kWh')
  - Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.average)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 0) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 1) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 2) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 3) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  hours_12: false
  experimental:
    color_threshold: true
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: Now
  series:
    - entity: ${vars[0]}
      type: column
      color: grey
      float_precision: 3
      data_generator: >
        return (entity.attributes.raw_today.map((start, index) => { 

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

        })).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
        [new Date(start["start"]).getTime(),
        entity.attributes.raw_tomorrow[index]["value"]]; }));
      show:
        extremas: true
      color_threshold:
        - value: ${vars[4]}
          color: '#42a047'
        - value: ${vars[5]}
          color: '#ffa600'
        - value: ${vars[6]}
          color: '#ff7100'
        - value: ${vars[7]}
          color: '#db4437'
  yaxis:
    - decimals: 2
  apex_config:
    tickAmount: 10
...

[MarvinE (Marvin)]

yes, you can add the option “time_delta” to shift the graph to the left or right. I got mine to work by adding

          now:
            show: true
            label: Nu
          series:
          - entity: sensor.stroomprijs
            yaxis_id: first
            time_delta: +50m
            type: column

[webwude]

Thx, I will try that.

[Faecon (Jo)]

Can I change the colour of the chart line above and below 0 ?

          series:
            - entity: sensor.p1_meter_5c2faf04a1f2_actueel_vermogen
              name: Actueel Verbruik
              float_precision: 1
              extend_to: now 
              color: >
                [[[ 
                  let state =  states['sensor.p1_meter_5c2faf04a1f2_actueel_vermogen'].state
                  if(parseFloat(state) > 0 ){
                    return 'rgb(153,50,204)' }
                  return 'rgb(102, 204, 0)'
                ]]]

i tried this, but this is not working

[albamatti]

Thanks! Can you share your code

[BSGalactica]

Hello
This could be what you need??

apex_config:
  dataLabels:
    enabled: false

With Labels

Without

Best regards

[DeSpecial001]

Hi, would you be able to share the code that gave you this display ?
Thx in advance

[tvds (Tim)]

Hi sure … here you go

Code

type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  title: Power
  standard_format: true
  show_states: true
  colorize_states: false
update_interval: 1min
apex_config:
  chart:
    height: 350px
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: false
    toolbar:
      show: true
      autoSelected: zoom
      tools:
        pan: true
    xaxis.type: datetime
  tooltip:
    enabled: true
    shared: true
    followCursor: true
  fill:
    type: gradient
    gradient:
      type: vertical
      shade: dark
      shadeIntensity: 0.2
      inverseColors: true
      opacityFrom: 0.9
      opacityTo: 0.2
      stops:
        - 0
graph_span: 24h
now:
  show: true
  label: Now
  color: rgb(68,115,158)
span:
  start: day
all_series_config:
  type: area
  opacity: 0.3
  stroke_width: 1.2
  show:
    legend_value: false
  color_threshold:
    - value: -3
      opacity: 0.9
    - value: 0
      opacity: 0.2
    - value: 3
      opacity: 0.9
series:
  - entity: sensor.actuele_opbrengst_zonnepanelen_kw
    name: Zonnepanelen
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    color: orange
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false
  - entity: sensor.power_consumption
    name: Afname
    color: rgb(95,3,242)
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false
  - entity: sensor.power_production
    name: Injectie
    invert: true
    color: rgb(28,226,34)
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false

[Mariusthvdb (Marius)]

might have missed it in the thread, but did you already update this card after the demise of the forecast attribute, and change to the ‘get_forecasts’ trigger template?

if you make a trigger template:

template:

  - trigger:
      - platform: state
        entity_id: sensor.date
#       - platform: event
#         event_type: event_template_reloaded
#       - platform: homeassistant
#         event: start
    action:
      - service: weather.get_forecasts
        target:
          entity_id: weather.buienradar
        data:
          type: daily
        response_variable: buienradar_forecast
    sensor:
      - unique_id: buienradar_forecast_complete
        state: >
          {{now()}}
        attributes:
          forecast: >
            {{buienradar_forecast['weather.buienradar'].forecast}}

# the above suffices. below attributes are just to break out the indivual forecasts..
          forecast_0: >
            {{buienradar_forecast['weather.buienradar'].forecast[0]}}
          forecast_1: >
            {{buienradar_forecast['weather.buienradar'].forecast[1]}}
          forecast_2: >
            {{buienradar_forecast['weather.buienradar'].forecast[2]}}
          forecast_3: >
            {{buienradar_forecast['weather.buienradar'].forecast[3]}}
          forecast_4: >
            {{buienradar_forecast['weather.buienradar'].forecast[4]}}

and then replace the weather entity in your card with the trigger based template sensor entity_id:

  - entity: sensor.buienradar_forecast_complete
    name: max.
    yaxis_id: temp
    unit: °C
    type: line
    color: '#FFBF00'
    data_generator: |
      return entity.attributes.forecast.map((entry) =>
      {
        var date = new Date(entry.datetime);

        return [date, entry.temperature];
      });

it works just like before.

[boheme61]

Well, i ditch the ApexChart for The Weather, thou still use it for i.e energy prices/consumption, i even abandoned the top-banner:card., and the multi-entities for temperatures inside.

I replaced those( and alot more ) with Custom:button-card, and expander-cards (Hiding most graphs and Cams etc) So they first “load” if i need to see them
, trying to get as much as i can in my “Overview” page, without jeopardized the “security”
Thou i actually already feel it’s becoming to “Cluttered”

However i will try your template-sensor, as i currently have 2x5 individual template-sensors
Thou my weather: button-cards uses the same “weather” button-template in the View

[Rainer1]

Hello,

I have a small problem with the display of the ApexChart card. Despite an intensive search
online, I didn’t find anything about this. Since I only have limited space for the card,
I would like to utilize the unused space under the title. (marked in the picture)
I can save space with header/floating: true, but then header/title_actions isn‘t working anymore.
Since i want to use title_action, this is not an option for me and I’m looking for another solution.
Can anyone help me with this or has someone an idea on how to solve this?

Thank you in advance.

              - type: custom:apexcharts-card
                graph_span: 1 day
                update_interval: 15sec
                header:
                  show: true
                  title: Temperaturentwicklung
                  title_actions:
                    tap_action:
                      entity: sensor.broadlink_1_temperatur
                      action: more-info
                  show_states: false
                  standard_format: false
                  colorize_states: true
                  floating: false
                apex_config:
                  chart:
                    height: 120px
                    offsetY: 10
                    parentHeightOffset: 12
                  tooltip:
                    enabled: false
                  xaxis:
                    labels:
                      style:
                        fontSize: 8px
                        fontWeight: 900
                yaxis:
                  - id: left
                    decimals: 0
                    apex_config:
                      tickAmount: 4
                      labels:
                        style:
                          fontSize: 8px
                          fontWeight: 900
                series:
                  - entity: sensor.broadlink_1_temperatur
                    stroke_width: 1
                    group_by:
                      func: avg
                      duration: 1min
                card_mod:
                  style: |
                    ha-card {
                      font-size: 8px;
                      text-align: center
                    }
                    div#header__title {
                      font-size: 10px;
                      font-weight: 900;
                    }
                    #state__name, #state  {
                      font-size: 8px !important;
                    }

[alvaroarcher]

hello sorry i cant help you with the question but i would like to have the code you are using pleaseeeeeeeeeeeee

thanks

[minskmail (viachaslau)]

Hi, my actual variant

- type: custom:apexcharts-card
    header:
      show: true
      show_states: true
      colorize_states: true
    experimental:
      color_threshold: true
    series:
      - entity: sensor.your_temperature_sensor
        type: line
        stroke_width: 3
        color_threshold:
          - value: 20
            color: cyan
          - value: 30
            color: yellow
          - value: 100
            color: red
        extend_to: now    
        show:
          header_color_threshold: true
    # yaxis:
    #   - min: 20
    span:
      offset: +1min
    apex_config:
      tooltip:
        followCursor: true
        x:
          show: false
    #   markers:
    #     size: 1
      xaxis:
        tooltip:
          enabled: true
      grid:
        show: false
    graph_span: 1h
    now:
      show: true
#      label: now
      color: red
    show:
      last_updated: true
      loading: true

[alvaroarcher]

thanks man but nor working
any ideas ??

im just remplacing your sensor with mine

[alvaroarcher]

i have this one wich is working just fine

''type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: Temperature Exterieur
show_states: true
series:

• entity: sensor.exterieur
  type: area
  name: E
  color_threshold:
  • value: 0
    color: 013DFF
    opacity: 1
  • value: 10
    color: ‘#0D0DFF’
  • value: 17
    color: ‘#0D97FF’
  • value: 20
    color: ‘#FF8101’
  • value: 25
    color: ‘#FF0101’
    stroke_width: 1
    opacity: 0.4’’