ApexCharts card - A highly customizable graph card

[maxym]

hello
I’m trying to migrate from mini-graph to apex. I’m struggling with details…

Short version:
how to remove all margins/empty areas around the graph like done with layout: minimal.

Long version

here is original I want to achieve:

here are my findings.

The graph looks very close to what I want when I use layout:minimal (see above). But using layout makes impossible to use any custom settings, incl those in apex_config. For this instance, it’s not possible to set min and max for each axis.
Se next image, which is based on the same code. the difference is only in existence of layout attribute.
Shouldn’t it work opposite way? Shouldn’t layout be allowed to be overridden by custom parameters?
I decided to go harder way exploring every apex config parameter. This is what I’ve achieved so far

Two major issues I have are:

1. area under graph: it remains even after moving the legend to the top
2. area on the left side of the graph. it remains after disabling rendering of Y-axis legend and ticks. Actually the margin remains on both sides.

Interestingly, changing minWidth/maxWidth and minHeight/maxHeight of labels to zero has impact on graph rendering even since rendering labels is disabled (show: false). Image above reflects those values set to zeroes. Without that, left and bottom margins are even bigger.

And here is complete code:

type: 'custom:apexcharts-card'
style: |
  ha-card {
    border-radius: 10px !important; 
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 3px 0px !important;
    margin-left: 13px;
    margin-right: 13px
  }
hours_12: false
graph_span: 24h
apex_config:
  legend:
    position: top
  chart:
    height: 126px
    redrawOnParentResize: true
  grid:
    show: false
  dataLabels:
    enabled: false
  xaxis:
    lines:
      show: false
    labels:
      show: false
      minHeight: 0
      maxHeight: 0
    axisTicks: false
  yaxis:
    - min: 10
      max: 40
      labels:
        show: false
        minWidth: 0
        maxWidth: 0
      axisBorder:
        show: false
      axisTicks:
        show: false
    - min: 40
      max: 90
      labels:
        show: false
        minWidth: 0
        maxWidth: 0
      axisBorder:
        show: false
      axisTicks:
        show: false
series:
  - entity: sensor.pcroom_temperature
    color: var(--accent-color)
    name: temp
    stroke_width: 1
    type: area
    opacity: 0.2
  - entity: sensor.pcroom_humidity
    color: '#3498db'
    name: hum
    stroke_width: 1
    type: area
    opacity: 0.2

Could you help me with formatting the graph into what I’m looking for?
with regards

[mosse]

Hi!

I recently discovered this wonderful card which so far does a very good job for me.
I have a scenario that I wonder if it’s feasible.

For my swimming pool, I have a water temperature sensor, and a pump activated sensor.
Being plugged somewher on the circuit pipes, the temperature sensor only have relevent information when the pump is activated.
I’m able to graph the pump status, and the temperature.
I’d really like to filter the temperature data to whether pump is activated.

Something like (in pseudo code) :

 series:
  - entity: switch.pool_pump
    transform: 'return x == ''on'' ? 1 : 0;'
  - entity: sensor.pool_temperature
    transform: 'return switch.pool_pump == 1 ? sensor.pool_temperature : null;'

Is such thing feasible ?

Thank you a lot.

[arifroni]

is it possible to produce this kind of curve?

100% Stacked JavaScript Bar Chart – ApexCharts.js

[tfmeier (Thomas Meier)]

I use ApexCharts to plot the humidity in my bathroom. A rule runs on a Tasmota flashed switch to turn on a fan in the bathroom when the humidity reaches a threshold and runs until another humidity threshold is reached. The switch pushes out on/off messages. Is it possible to overlay the on (say 1) and off (say 0) value onto the humidity graph?

[mosse]

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 (Thomas Meier)]

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]

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 (Thomas Meier)]

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

[1BH]

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]

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]

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:

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]

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]

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]

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]

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:

Thank you.

[devastator]

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]

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]

@devastator

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)

That is fixed in the latest beta

@markcocker

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

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]

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

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

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

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 (Luis Coelho)]

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.

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.