ApexCharts card - A highly customizable graph card

OBoudreaux · December 23, 2022, 1:34pm

Is there a way to show markers for arbitrary data points on a time series line graph? Like the extrema but for any particular given x value.

I’ve been mucking around with

apex_config:
  annotations:
    points:
        - x: ${new Date(states["sensor.myradar_daily_mintime"].state).getTime()}
          y: ${ states["sensor.myradar_daily_min"].state }
          marker:
            size: 5
            shape: circle

but not having much luck. Do I need to create a second scatter series for any points that I’m interested in?

schmierlappe · December 29, 2022, 8:27am

this charts looks amazing maybe you can share your config?

Lunkobelix · December 29, 2022, 9:08am

Does anyone have a graph that is subtracting one sensor minus another one?

I would liek to show the consumed energy (kWh) for my house excluding the kWh used to charge my car.

So something like household_energy - ev_Charging

erlendfalch · December 29, 2022, 9:36am

Hi! Thanks to RomRider for such an awesome addition to Home Assistant, and everyone contributing. Its truely admirable!

I have tried my best to search this thread and github page for tips on how to implement, but have not found what I was looking for yet. Hope its ok to ask:

Is there a way to group and sum/avg per hour of the day (0-24) over a period of a week or month?

I wanted to try to make a graph that presents stacked columns of consumption categories (heating, charging, hot water, el-devices, light) and its total consumption as Y-axis. Then hour of the day as X-axis.

I looked at using offset, but it got quite messy. Any tips or directions to look towards?

Reflex · December 29, 2022, 12:22pm

I’d suggest creating a template sensor and use the result as a entity in the graph.

value_template: >-
  {{ states.sensor.all_estimated_usage_power.state | float - states.sensor.powerplugs_total.state | float }}

Lunkobelix · December 29, 2022, 12:45pm

Great idea but I want to use the long term statistics sensor and a template sensor is only available for a week.

TVHimble · December 30, 2022, 1:20pm

What I have now is this!

What I would like to have is one more column showing that yellow “level” in the chart for each hour.

I do understand that this probably has more to do with the sensors than with the apex coding but still any help is appreciated if available.

What is behind all this:

type: custom:apexcharts-card
style: |
  ha-card {
    background-color: var(--primary-primary-color);
    box-shadow: none;
  }
graph_span: 48h
hours_12: false
experimental:
  color_threshold: true
show:
  last_updated: true
header:
  standard_format: false
  title: Nordpool
  show: true
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 320px
  yaxis:
    min: 0
    tickAmount: 6
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_kwh_fi_eur_3_09_01
    type: column
    name: .
    stroke_width: 5
    float_precision: 3
    show:
      legend_value: false
      in_header: false
      extremas: true
      header_color_threshold: true
    extend_to: end
    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"]];}));    
    color_threshold:
      - value: 0
        color: green
      - value: 10
        color: goldenrod
      - value: 20
        color: darkred
      - value: 30
        color: red
      - value: 40
        color: black
  - entity: sensor.spot_nordpool_keskiarvo_hinta_7vrk
    type: line
    name: 7vrk keskiarvo
    stroke_width: 0.5
    show:
      legend_value: true
      in_header: true
      extremas: false
      header_color_threshold: true
  - entity: sensor.spot_nordpool_max_hinta_7vrk
    type: line
    name: 7vrk max
    stroke_width: 0.3
    show:
      legend_value: false
      in_header: true
      extremas: false
      header_color_threshold: false
  - entity: sensor.nordpool_kwh_fi_eur_3_09_01
    type: line
    name: Hinta nyt
    stroke_width: 0
    float_precision: 3
    show:
      legend_value: true
      in_header: true
      extremas: false
      header_color_threshold: false
  - entity: sensor.pricelevel_median_today
    type: line
    name: 1-5
    stroke_width: 0
    float_precision: 3
    show:
      legend_value: true
      in_header: true
      extremas: false
      header_color_threshold: false
  - entity: sensor.nordpool_kwh_fi_eur_3_09_01
    type: column
    name: .
    stroke_width: 0.5
    float_precision: 3
    show:
      legend_value: false
      in_header: false
      extremas: false
      header_color_threshold: false
    extend_to: end
    data_generator: >
      return (entity.attributes.raw_today.map((start, index) => { return [new
      Date(start["start"]).getTime(),entity.attributes.raw_today[index]["value"]+3,76];})).concat(entity.attributes.raw_tomorrow.map((start,index)
      => { return [new
      Date(start["start"]).getTime(),entity.attributes.raw_tomorrow[index]["value"]+3,76];})); 
    color_threshold:
      - value: 0
        color: grey
        opacity: 50

Nordpool is a sensor pulling data from european electricity spot market. Level is a code made by vilhelm.carlsson to split the day prices according to median price into 5 groups. His code can be found from here

What i wish to gain is predictability, to be able to see right away how many and which hours do fall in which category.

Do you guys think that I can do the coding with apex using javascript. In a way creating a value for each hour with the code already implemented on vilhem’s sensor

- platform: template
  sensors:
    pricelevel_median_today:
      friendly_name: "Elprisnivå_median_today"
      unique_id: 95789542
      unit_of_measurement: "Level"
      value_template: >-
        {% set today=states.sensor.nordpool_kwh_se3_sek_3_10_025.attributes.raw_today| sort(attribute='value')-%}
        {%set median= (today[11].value+today[12].value)/2%}
        {% if states('sensor.nordpool_kwh_se3_sek_3_10_025')|float(0.5) >= median|float(0.5) *0.9
            and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float(0.5) < median|float(0.5) *1.15 %}
            {{3}}
        {% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *0.6
            and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *0.9 %}
            {{2}}
        {% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *0.6 %}
            {{1}}
        {% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *1.15
            and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *1.4 %}
            {{4}}
        {% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *1.4 %}
            {{5}}
        {% endif %}

Or should I give up on that simplicity and try to create a sensor that would output this data?

T81 · December 30, 2022, 2:45pm

Great work overall! May I ask, is there any option to create syncing chart like this one: JavaScript Synchronized Line Charts – ApexCharts.js

Jarfish · January 1, 2023, 3:39pm

Hi folks, just starting to get to grips with ApexCharts, fantastic add-on with more options than I know what to do with!

I was wondering if it’s possible to use a script in Home Assistant to toggle the visibility of a series in a chart, much the same as a user manually clicking on the series name in the legend would do?

Thinking I would use this to create custom buttons outside of the chart card, which could be used to show/hide multiple series at a time, or to have the the states shown in the header activate the toggle visibility script as their click action by activating the script.

Lunkobelix · January 1, 2023, 7:09pm

Interesting idea Have a look at the “conditional card”, it won’t solve your problem out of the box but with a variable that you toggle you can have charts show/hide.

MBA78 · January 2, 2023, 7:23pm

Hi everyone,

I really like this beautiful card.
Today I need your help. I want to display a graph with consumption per week. Unfortunately the values shown are wrong and I don’t know what I’m doing wrong.
Here is my code. I also include two pictures. The first one is chart by which is ok. The second one is week and the values are not correct. It does not display the total amont of the weeks.
Code:

  - type: custom:apexcharts-card
    graph_span: 56d
    span:
      end: isoWeek # hebdo
    stacked: true
    header:
      show: true
      title: Consommation hebdomadaire sur 1 an (€)
    apex_config:
      chart:
        type: area
        height: 250
      stroke:
        show: true
        width: 1
        curve: smooth
      legend:
        show: true
      fill:
        type: gradient
        gradient:
          shadeIntensity: 0.1
          opacityFrom: 0.25
          opacityTo: 1
          inverseColors: true
          stops:
            - 0
            - 90
            - 100
    series:
      - entity: sensor.energy_linky_euro_daily_hphc
        color: 'rgb(138,43,226)'        
        type: column
        group_by:
          func: last
          duration: 7d
        show:
          datalabels: true

Capture 1
Capture 2

mathewtaylor2007 · January 3, 2023, 9:02am

No sadly not, it seems to be permanently broken now on all my devices.

hajo62 · January 3, 2023, 11:37am

chart_type: pie

I wonder, how I would best plot a pie with a single percentage value and format (Size, color and position) the datalabel of that cake piece.
In that example, the 1 should be formatted.

type: custom:apexcharts-card
header:
  show: true
chart_type: pie
series:
  - entity: sensor.solarman_days
    unit: '%'
    name: done
    color: lightgreen
  - entity: sensor.solarman_days
    unit: '%'
    name: open
    transform: return 100 - x ;
    color: lightgrey
    datalabels: false

vercellino · January 3, 2023, 1:45pm

Hello and Happy New Year to everybody!

I wonder if is possible to template in some way the in_chart show option of a serie in order to dynamically show or hide the serie from the graph according, for example, to the value of the serie itself.

Thank you.

madmalkav · January 3, 2023, 1:55pm

Hi everyone. I’m a total noob and I’m not sure if I’ve done something wrong or found a bug.

I have a Shelly EM, two energy sensors, an a utility meter for each sensor with 3 tariffs. I have all these feeding the HA Energy dashboard:

I also used the ApexCharts Card to make some nice pies

This one is linked to Utility Meter “Consumo Ali y Carlos”
imagen

And this one is linked to Utility Meter “Consumo Diego y Poli”

imagen

Pies get the total directly from the Shelly sensor, and the partials from the utility meters. As you can see, the sum of the partials on the pies doesn’t equal the total, but the sum of the partials from the Energy dashboard does match. As both Energy dashboard and ApexCharts cards are feed from the same data, I’m pretty lost about what can be causing this.

This is the code for the card:

type: custom:apexcharts-card
chart_type: pie
graph_span: 24h
span:
  start: day
  offset: '-1d'
header:
  show: true
  title: Consumo Ayer
  show_states: true
  colorize_states: true
  floating: true
all_series_config:
  unit: kWh
  float_precision: 2
  group_by:
    func: diff
    duration: 24h
  show:
    legend_value: true
    in_header: false
apex_config:
  chart:
    height: 250px
series:
  - entity: sensor.shellyem_bcff4dfcfbef_channel_1_energy
    name: Total
    show:
      in_chart: false
      in_header: true
  - entity: sensor.consumo_ali_y_carlos_p1
    name: Punta
  - entity: sensor.consumo_ali_y_carlos_p2
    name: Llano
  - entity: sensor.consumo_ali_y_carlos_p3
    name: Valle

Any ideas about what can be going wrong?

ReneG · January 5, 2023, 12:46pm

Maybe someone can help with this:

I am representing a chart with the price by hour for the electricity.
I have data to cover future values as well, so I used the option DATA GENERATION:

data_generator: |
      return entity.attributes.data.map((price, index) => {
        return [new Date(price.start_time).getTime(),price.price_eur_per_mwh/1000];
      });

Everything looks good but the header, it is showing the last value of the array of the series generated by the function. I would like to show the NOW value which is 0.15. Is there a way to do it ?.
Another question, Now each column in the center of the hour. so for example in the photo, the marker NOW is showing that it is almost 14:00 which is the correct current time, but it is in between the column of 13:00 and 14:00 and it can create confusion understanding the current price. It is a way to make the column wider to cover the hour?

thank you

sebastian9191 · January 5, 2023, 1:56pm

Helllo, first of all i must say i love this card, it looks really good. I have made a card that shows todays electricity price, and my “cut off” limits for water heater and heating. For now, i have made the “cut offs” show as lines, but i would like to change the color of the columns instead. To do that, i would need to change the color threshold value based on my sensor values.
It would look something like this

     color_threshold:
      - value: 0
        color: lightgreen
      - value: 150
        color: dodgerblue
      - value: 200
        color: orangered

But what i want it to be is something like this, but it returns “value.series[0].color_threshold[2].value is not a number” i have tried different methods but nothing seems to work. Is there a way to convert the sensor value to the right type of number?

Blockquote

    color_threshold:
      - value: 0
        color: lightgreen
      - value:  "{{ (states('sensor.nordpool_vvb_on_hours')) | float }}"
        color: dodgerblue
      - value: "{{ (states('sensor.nordpool_varme_on_hours')) | float }}"
        color: orangered

this is my full code for my card

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 1d
span:
  end: day
show:
  last_updated: true
now:
  show: true
  label: Nå
header:
  show: true
  show_states: true
  colorize_states: true
  title: Strømpris i dag
series:
  - entity: sensor.nordpool_kwh_krsand_nok_3_095_025
    type: column
    data_generator: |
      return (entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]* 100];
      })).concat(entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]* 100];
      }));
    name: Pris
    show:
      in_header: true
      in_chart: true
    unit: ' Øre/kWh'
    group_by:
      func: max
      duration: 1h
    color_threshold:
      - value: 0
        color: lightgreen
      - value: 150
        color: dodgerblue
      - value: 200
        color: orangered
  - entity: sensor.nordpool_vvb_on_hours
    transform: return x * 100;
    name: VVB av over
    show:
      in_header: false
      in_chart: true
    type: line
    stroke_width: 2
    unit: ' Øre/kWh'
    color: darkblue
    group_by:
      func: max
      duration: 1h
  - entity: sensor.nordpool_varme_on_hours
    transform: return x * 100;
    name: Varme lav over
    show:
      in_header: false
      in_chart: true
    type: line
    stroke_width: 2
    unit: ' Øre/kWh'
    color: orangered
    group_by:
      func: max
      duration: 1h
  - entity: sensor.electricity_price_day_average
    transform: return x * 100;
    name: Snittpris i dag
    show:
      in_header: true
      in_chart: false
    type: line
    unit: ' Øre/kWh'

Dirkdejong81 · January 5, 2023, 5:33pm

Hi, Is it possible to use a If state like by Name?? this seems not to work.
I want to make something like i can switch between day and week by a button in the graph.
SO try to switch the name to day to week

series:
        - entity: sensor.daily_gas
          type: column
          show:
            datalabels: true
            legend_value: false
          color: '#607d8b'
          name: |-
            {% if is_state('input_number.gas_usage_graph', '0.0') %}
              Week
            {% else %}
              Day
            {% endif %}

aem · January 5, 2023, 9:56pm

Have you managed to fix this? unning into the same issue right now. 3 series, 2 yaxis - one of the two which “share” the same axis has an offset and is not alligned correctly =/

aem · January 5, 2023, 10:15pm

Just experimenting a bit with the ApexCharts in HA and tried to build this:

Temperature Inside and Outside should share the same yaxis on the left - Day/Night is realised by a second yaxis on the right (hidden). Unfortunately Inside Temerature doesn’t seem to be on the same yaxis as Outside Temperature even if it is assigned to the same axis =(
I love the color_threshold but also want to use the area option somehow. is it possible to fill the line with the threshold with a gradient while keeping the line colorful?

Code:

type: custom:apexcharts-card
graph_span: 7d
apex_config:
  legend:
    show: false
brush:
  selection_span: 3d
experimental:
  color_threshold: true
  brush: true
all_series_config:
  stroke_width: 3
header:
  show: true
  floating: false
  title: Outside vs. Inside (7d)
  show_states: true
  colorize_states: true
yaxis:
  - id: left
  - id: right
    show: false
    opposite: true
series:
  - entity: sensor.outside_temperature
    name: Outside Temperature
    yaxis_id: left
    type: line
    opacity: 1
    fill_raw: last
    color_threshold:
      - value: 0
        color: ffffff
      - value: 8
        color: '#318ce8'
      - value: 16
        color: '#bcf74f'
      - value: 24
        color: '#ff9600'
    show:
      extremas: time
      in_brush: true
  - entity: sensor.miaomiaoce_inside_temperature
    name: Inside Temperature
    yaxis_id: left
    fill_raw: last
    color: '#FFC300'
    show:
      extremas: time
      in_brush: true
  - entity: binary_sensor.night
    yaxis_id: right
    transform: 'return x === "on" ? 1 : 0;'
    stroke_width: 0
    color: black
    opacity: 0.2
    type: area
    curve: stepline
    show:
      in_header: false