ApexCharts card - A highly customizable graph card

[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.

[Lunkobelix]

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 (Ryan)]

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]

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]

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

[Kabala (Cata)]

Hi everyone,

i have a binary sensor and i want to display its attributes.
The problem is that shows double values ​​in the diagram.
16.04 the binary sensor was activated, but it shows me the 17.04. but also.
And with the same date as on April 16.
Today I shouldn’t have any data.

What did I do wrong?
Thanks.

type: 'custom:apexcharts-card'
update_delay: 8s
graph_span: 7d
all_series_config:
  stroke_width: 0.8
  opacity: 0.8
  unit: min
span:
  end: day
header:
  show: true
  title: Bewässerung der letzten 7 Tage
  show_states: true
  colorize_states: true
apex_config:
  grid:
    show: false
  chart:
    height: 300
  plotOptions:
    bar:
      columnWidth: 80%
  yaxis:
    - show: false
      decimalsInFloat: 0
  xaxis:
    axisBorder:
      show: true
    labels:
      style:
        fontSize: 12px
        fontFamily: null
now:
  show: false
  label: jetzt
  color: '#bf5e5e'
series:
  - entity: binary_sensor.irrigation_unlimited_c1_z1
    attribute: today_total
    type: column
    name: Einfahrt
    color: '#bf5e5e'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z2
    attribute: today_total
    type: column
    name: Eingang
    color: '#3b6ba1'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z3
    attribute: today_total
    type: column
    name: Streifen Haus
    color: '#3ba190'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z4
    attribute: today_total
    type: column
    name: Streifen Nachbar
    color: '#93599e'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true

[RomRider]

@tombak82

Self-consumption is showing correctly on the graph for today, but not for the past days.
See below for the picture.

Why don’t you use Utility Meter - Home Assistant ?

@Kabala

Today I shouldn’t have any data.

Use extend_to_end: false

[Ivar247]

Hey all,

Like everybody else , love this card have been studying this channel quite a lot. The examples in this channel with the apex config examples really help a lot ! Would suggest to add them to the github.

I’m wondering if somebody knows how to add a different scale axis on the right sight with apex config ? Would like to add the consumption and generation with a dotted line in this graph below. Will add the code for other people once if added the dotted line and axis so they can also use it ! Thanks a lot !

[lcmg (Luis Coelho)]

I think I’m one step further but still no luck.
I was wrongly understanding the format. Reading better the documentation the first field need to be the timestamp in ms (done) and second field need to be a number or float. I think the issue could be that I’m passing a full string.
Anyone had same issue or has any sugestion on how to overcome? would it work trying to manipulate the string using “templating” (I’m not familiar with this). Thanks in advance for any sugestions.
current format of the sensor:
‘[[1618527600000, 11.23], [1618614000000, 12.39], [1618700400000, 2.88]]’

[RomRider]

Use JSON.parse()in data_generator if the data is a string

[Kinetic21 (Josh)]

The only way I have found to add a second axis is actually to define y-axis values for all series individually. However, it is pretty flexible, and you can selectively choose which axes you want to display (e.g. if you have multiple between the same set of values), and which ones should appear on the right using opposite: true. You basically just need a ‘yaxis’ section that matches (in order and number) the series you have.

I’m currently evaluating a shower sensor using the trend binary sensor, and have got the below Apex card to visualise all the 4 things I want to see. Humidity % (closer left axis), two binary sensors between 0-1 (right axis - the second one is hidden), and the trend gradient (far left axis).

In that order, I have configured the axes like this:

apex_config:
  chart:
    height: 600
  grid:
    show: false
  yaxis:
    - show: true
      decimalsInFloat: 0
      min: 40
      max: 100
      tickAmount: 3
    - show: true
      decimalsInFloat: 0
      tickAmount: 1
      min: 0
      max: 1
      opposite: true
    - show: false
      min: 0
      max: 1
      opposite: true
    - show: true
      decimalsInFloat: 3
      min: 0
      max: 0.5
      tickAmount: 4
series: