ApexCharts card - A highly customizable graph card

mosse · April 7, 2021, 12:31pm

I think this looks like what I did:

Add a serie which looks like

  - entity: switch.fan1
    transform: 'return x == ''on'' ? 1 : 0;'
    type: area
    curve: stepline
    stroke_width: 0

=> draw switch.fan1 history by transforming on/off status to 1/0 decimal value. Draw as area/stepline/0 width to hightlight the whole vertical area of the graph.

Then in apex_config, configure the y axis with:

apex_config:
  yaxis:
    - show: false
      decimalsInFloat: 0
      min: 0
      max: 1
      tickAmount: 1

=> for the fan serie, don’t show the y axis but have 0 value on the bottom and 1 on the top.

You have to adapt the yaxis item to match your series index, ie is the serie is the 2nd serie, don’t forget to have a yaxis config for the 1st serie first

tfmeier · April 7, 2021, 1:21pm

Thanks for this snippet. Works a treat and gives me interesting insight

The card configuration is as follows if anyone is interested

type: 'custom:apexcharts-card'
header:
  show: true
  title: Humidity Trend
  show_states: false
  colorize_states: true
graph_span: 24h
series:
  - entity: sensor.tmr01_htu21_humidity_ensuite
    name: HTU21
    type: line
  - entity: switch.deta01_fan_ensuite
    transform: 'return x == ''on'' ? 1 : 0;'
    type: area
    curve: stepline
    stroke_width: 0
apex_config:
  yaxis:
    - show: true
      decimalsInFloat: 0
    - show: false
      decimalsInFloat: 0
      min: 0
      max: 1
      tickAmount: 1

arifroni · April 8, 2021, 8:21am

how to use transform to get a percentage? eg. i have a sensor value of X. i want to plot the percentage of X in Y. So i want (X*100)/Y.

tfmeier · April 8, 2021, 12:11pm

Have you checked this https://github.com/RomRider/apexcharts-card#transform-option

1BH · April 9, 2021, 2:41pm

I am trying to find some speed optimizations. I have a very slow tablet for my Wall Panel instance, and it seems the ApexCharts is somewhat resource hungry. Everything works per se and looks great, but all the animations on the panel slow down when the ApexCard starts updating. I figure I might give up on some details, in order to speed things up.

Caching should already be used, but seems that there is still a lot happening on each update for some reason.

Assuming the transform etc calculations take place in the end device rather than on the home assistant runner, it might make sense to do groupings by etc on the assistant runner machine instead of in each client. Anyone that has had any similar concerns, or some best practices to share? Or is there some way to make the caching even more effective - only update with new info for instance?, which I guess would take away the need for more specific solutions…

Airyphyla · April 10, 2021, 2:42pm

Hey guys,

I want to log the daily increase of the corona infections, also i would like the graph to show how much the increase or decrease is of the infections relative to previous day… I have no idea where to start. Could anyone help me with this?

thanks in advance!

cpo · April 10, 2021, 2:54pm

Hi everyone,

is there a chance to get the dotted “axistick”-lines solid and maybe in another color?
The apexscharts seem to have that option:

EDIT: Nevermind the code below: it’s really only for the axisTicks.

      axisTicks: {
          show: true,
          borderType: 'solid',
          color: '#78909C',
          width: 6,
          offsetX: 0,
          offsetY: 0

I’m looking for the dotted horizontal lines in the graph:

dotted

Most preferrably i’d like them to be solid and in 50% black

Or can i, alternatively, get rid of them without the loss of everythinge else (i dont wanna use ‘minimal’ on this)?

Thanks.

maxym · April 10, 2021, 3:41pm

in apex_config:

apex_config:
  xaxis:
    lines:
      show: false

look at about 10 posts above yours.
there is my post with screenshots of graphs without those lines.
you find the code over there too.

I believe colour can be changed - see apex original documentation for details. it’s pretty clean to read

cpo · April 10, 2021, 3:46pm

Thanks… I already tried your code, but it doesn’t work for me.
Maybe i’m doing something wrong here:

          apex_config:
            xaxis:
              lines:
                show: false
            yaxis:
              show: true
              decimalsInFloat: 0
              min: 0
              max: 100
              tickAmount: 4
              axisTicks:
                show: false
              lines:
                show: false

maxym · April 10, 2021, 4:01pm

yeah, partially my bad. it’s yaxis.
With yaxis it might be tricky. It might depends on number of y/axes. If there are more than one you may need to set attributes it for each one separatelly - at least try it. see my mentioned example.
If still not work provide complete code of your card.

Now I’m looking at my code and there is no disabling lines for yaxis… maybe other options do that
anyway if you copy apex_config from my source code it has to work. I did that trying all options from apex configuration. some are unnecessary others are.

cpo · April 10, 2021, 7:12pm

Ok, worked it down based on your code

So the part i was looking for is

grid:
  show: false

That is disabling the dotted horizontal lines.
~~Sadly, there doesn’t seem to be any available styling option, like solid or color. So it’s just on or of (for now).~~
There is:

grid:
  show: true
  strokeDashArray: '0'
  borderColor: '#323232'

This is getting me what i wanted:

lines

Thank you.

devastator · April 12, 2021, 2:30pm

Love this card, thanks !

Could somebody help me fix this problem ?
I have 2 entities, but for some reason for the line chart it adds an extra value, which is always the same as the one before that (being ‘today’ in this case)

- type: custom:apexcharts-card
  graph_span: 7d
  update_interval: 15m
  header:
    show: false
  span:
    end: day

  series:
    - entity: sensor.elektriciteit_aangekocht_vandaag
      type: line
      group_by:
        func: last
        duration: 1d
      show:
        datalabels: true
    - entity: sensor.verbruik_elektriciteit_dag
      type: column
      group_by:
        func: last
        duration: 1d
      show:
        datalabels: true

  cache: true
  stacked: false
  color_list: ["red", "orange"]
  apex_config:
    stroke:
      width: 2
    legend:
      position: "top"
      horizontalAlign: "left"

markcocker · April 12, 2021, 2:31pm

Has anybody tried to use ApexChart Card to create a chart from data directly in InfluxDB?

For example using data_generator to run a query using the Influx API.

I periodically load my electricity usage and cost data from Octopus into InfluxDB. At the moment I create a chart in Grafana and integrate it into a HA dashboard via an iframe but its formatting options are limited and would require compromising security in order to see the graphs in the dashboard from outside my home network.

RomRider · April 12, 2021, 7:52pm

That is fixed in the latest beta

You could, but you have to write the javascript yourself There’s no “native” integration of apexcharts with influxDB. I wanted to do it at some point, but the native influxDB javascript library is waaaay to big (1.5MB!!) to add to the already heavy apexcharts
In the end, influxDB is only using HTTP requests, so it should work if you can write the appropriate code in data_generator

davo · April 14, 2021, 1:25pm

Hi, I am trying to graph solar monthly production, but if I type duration 1month it crashes HASS, or if it paste 1month it doesnt crash HASS but the results are not correct.

graph_span: 6 month
span:
  end: month
series:
  - entity: sensor.solar_monthly
    type: column
    group_by:
      func: max
      duration: 1 month
update_interval: 1d

Capture3

If I put duraction as 4.5w the graph is closer to what I am expecting.
Capture4

I also have a chart for daily production which duration is set to 1d, and it works as expected.

Am I doing something wrong or is it a bug in the apex-charts ?

EDIT:
After alot of playing around I have managed to get the graph kind of what I want… by adding span: end: week as below

graph_span: 14 month
span:
  end: week
series:
  - entity: sensor.solar_monthly
    type: column
    name: Monthly Production
    group_by:
      func: max
      duration: 1 month
update_interval: 1d

Capture5

It now shows the correct monthly generation, but when I hover the mouse over the bar, the hover box has the date as mid month - eg Jan 16 2021 4:30pm. Is it possible to change this so it only has month and year - eg Jan 2021 ?

lcmg · April 14, 2021, 10:13pm

Hello,
I need some help, if possible.
I’m trying to build a graph using info from a query to a db using the sensor sql.
I’ve manage to create the sensor with the string “data_generator” format, but I’m not being able to create the graph using the sensor. I’m not able to pass the sensor values in a way that Apexchart can read it as “data_generator”. Below a screen shot of sensor.
Captura de ecrã no 2021-04-14 23-06-18

sensor string:

value: '[[10, 9.5], [11, 14.35], [12, 8.75], [13, 10.19], [14, 11.2]]'
friendly_name: consumo_electricidade_apex

Any suggestions?
Many thanks in advance.

Lunkobelix · April 15, 2021, 6:51am

I have a vague memory of this being discussed, but would it be possible to click the header value and be preseted with the historical grap shown below?

Ryan_Grandy · April 15, 2021, 4:15pm

I just created a statistics sensor to get the min/max for a specific entity then use that value with “lovelace-card-templater” to create a jinja template for the min and max values for apex charts. It seems to work good so far to auto adjust the limits.

tombak82 · April 16, 2021, 9:55am

Hi, I’m trying to show the current and past 3 days of my solar production/imported/exported/self-consumption.
Self-consumption is showing correctly on the graph for today, but not for the past days.
See below for the picture.

Extra info:

I’m using the MAX function in the graph for the sensor (sensor.energy_total_zelfconsumptie_kwh)
How is the sensor created:

#Zelfconsumptie
  - platform: template
    sensors:
      energy_total_zelfconsumptie_kwh:
        friendly_name: 'Zelfconsumptie vandaag (kWh)'
        value_template: "{{ (states('sensor.solaredge_energy_today_template')|float - states('sensor.energy_export_total_dagelijks_kwh')|float)|round(2) }}"
        unit_of_measurement: "kWh"

=> this retraction goes wrong a couple of seconds(?) before midnight. I think the sensor resets itself to soon - retracting 0 from the produced solar power… see picture:

Any ideas how to resolve this issue? thanks for the help!

tombak82 · April 16, 2021, 9:58am

The graph code:

type: 'custom:apexcharts-card'
graph_span: 4d
update_interval: 5m
cache: true
span:
  end: day
  offset: '-0h'
header:
  show: true
  title: Productie / Injectie / Opgevraagd
apex_config:
  xaxis:
    labels:
      format: dd-MM
      show: true
      showAlways: true
  yaxis:
    forceNiceScale: false
    decimalsInFloat: 0
  chart:
    type: area
    height: 300
  stroke:
    show: true
    width: 1
  legend:
    show: true
  dataLabels:
    enabled: false
    distributed: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - entity: sensor.solaredge_energy_today_template
    color: 'rgb(255,255,51)'
    type: column
    name: Geproduceerd
    float_precision: 2
    group_by:
      func: max
      duration: 23h59m59s
  - color: 'rgb(0,100,0)'
    entity: sensor.energy_total_zelfconsumptie_kwh
    type: column
    name: Zelfconsumptie
    float_precision: 2
    group_by:
      func: max
      duration: 23h59m59s
  - entity: sensor.energy_export_total_dagelijks_kwh
    name: Geïnjecteerd
    float_precision: 2
    type: column
    group_by:
      func: max
      duration: 23h59m59s
  - color: 'rgb(128,0,0)'
    entity: sensor.energy_import_total_dagelijks_kwh
    type: column
    name: Opgevraagd
    float_precision: 2
    group_by:
      func: max
      duration: 23h59m59s