ApexCharts card - A highly customizable graph card

I’m not sure if this is the right place to ask, I know you can graph a binary sensor with this card. Can you graph an automation trigger time? i.e the automation triggers at 4AM, 7AM, 3PM, etc.

This card looks exactly like the missing piece I was looking for! I would like to show the consumed energy in a pie chart (e.g. Boiler, dishwasher,…).
It works without a problem with the current power sensors (W), but when I try to plot the values cimulated by the Riemann integral and utility meter (kWh) it just shows “N/A”.
I also get “N/A” with the calculated sensors for my lights, other sensors like temperature or humidity work fine.
Anything I’m doing wrong?
Thanks in advance!

Did you enable the recorder for this sensor?

I’m not sure I understand? Would that be displaying the times the automation has triggered or displaying the times that are configured in the automation itself as triggers?

1 Like

I want to display the time the automation triggers. The automation is based on Simplisafe and the only way I see the device is via an SIMPLISAFE_EVENT. I use the event to trigger an automation, i.e, to send a notification that the door is open.

Thanks a lot! Simple but effective solution, all working now!

Edit: Another question:
I created a pie chart, and tried the “datalabels” option , but it still shows the percentage value in the pie-chart, and not the data value.

all_series_config:
  show:
    datalabels: true

Hi Rom,

Since you pointed me here, please let me ask for support on this Lovelace: mini graph card

Id like a graph of a sensor to be plotted against a colored background (opposed to coloring the graph line). use case: eg windforce between 0 and 12 Bft,

I think I scanned all graph options, both here and on https://apexcharts.com/javascript-chart-demos/, but really couldn’t find one for showing that background, and plot the graph against it. Reason I need that to be in the card config, is a hard coded background jpg or png will never adjust size correctly on various devices, so the graph will be useless.

Hope you can give me a clue how to begin with this, thanks!

apex_config:
  grid:
    row: 
      colors: ['color 1', 'color 2', 'color 3', 'etc']
1 Like

O I see, we need to check the Apex site for this https://apexcharts.com/docs/grid/

but how to set colors for those backgrounds following lets say the Bft scale per 2 numbers:

0/1: white
2/3: yellow
4/5: orange
6/7: blue
8/9: darkblue
10/11: maroon
12: black

using this in the backend for bft colors

    sensor.weatherbit_beaufort_value:
      templates: &bft_color
        icon_color: >
          var mapper = {'0':'lightblue',
                        '1':'paleturquoise',
                        '2':'aquamarine',
                        '3':'greenyellow',
                        '4':'lime',
                        '5':'mediumspringgreen',
                        '6':'yellowgreen',
                        '7':'navy',
                        '8':'gold',
                        '9':'orange',
                        '10':'tomato',
                        '11':'orangered'}
          return mapper[state] ? mapper[state] : 'crimson';

:wink: maybe I can even template the background using the sensor in a config template somehow?

I don’t think this card has template functions like that. You could control the number of rows in the chart with:

apex_config: 
  yaxis:
    tickAmount: # of rows

Then manually set the color values you want. I don’t think it can be set up to dynamically update itself.

You can use annotations on the y-axis to achieve what you want. This would be an apex_config setting.

First off, amazing card! Would it be possible to introduce straight line (paralel to x-axis) on any given value? I would like to create a visualization of a baseline.

Scroll maybe a week back and you will find “annotation”, this solves what you want to do :grinning:

Edit:
Sorry for screenshot, can’t copy code properly on my phone.

1 Like

Hi

This is great! Who needs jupyter and matplotlib? :wink:

A couple of questions on polish:

  • Is it possible to hide the legend completely? I have the states colorised/defined in the title, so it is extraneous
  • Is it possible to remove the offset from the name of the series for a series with an offiset. Right now, I define the series name as “yesterday” , but it still appears are “yesterday (-1d)”
  • fill_raw = ‘null’ as a series option does not seem to prevent the last value available to be filled out to the end of the chart. I am trying to keep the x-axis fixed spanning a day from midnight, and have the chart fill in as the day’s data are collected. But I get a straight horizontal line of the current value from now.

Hi,
I get strange value for the 1rst item of a hourly chart: it is always far too high compared to what is reported on larger chart, as if it contains the whole day:
Here the charts for 1 day, 2 days and 3 days about the same data:



type: 'custom:apexcharts-card'
graph_span: 2d
header:
  title: Conso par Heure
  show: true
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
span:
  end: day
now:
  show: true
all_series_config:
  stroke_width: 2
  show:
    legend_value: false
series:
  - entity: sensor.linky_hc
    name: Linky HC
    type: column
    transform: return x / 1000;
    unit: kWh
    group_by:
      func: diff
      duration: 60min

Looks like it is linked to the “end: day” option:

span:
  end: day

Thx.

I’ve made a graph for the price of the electricity in my area and everything seems to work as it intended. However, once I enable the header.show_states I see that the value never changes, but it always reflect whatever is the last group/value returned from data_generator.

Is there a way to tell the apexchart to use the value from “now”?
Another question… is there a way to get rid of the subtitle? It’s redundant with the title in all of my cases.

image
image
The state is always ‘OK’, but I’ve also tried using the current date, a valid price and even forcing the refresh of the table, but the price is always the last one in the list. :frowning:

cards:
  - type: 'custom:vertical-stack-in-card'
    cards:
      - type: 'custom:apexcharts-card'
        graph_span: 48h
        apex_config:
          chart:
            height: 200px
        header:
          title: Price Overview
          show: true
          show_states: true
          colorize_states: true
        span:
          end: day
          offset: +1day
        now:
          show: true
          label: Now
        all_series_config:
          stroke_width: 2
          extend_to_end: false
        series:
          - entity: sensor.tibber_price_overview
            unit: øre/kWt
            float_precision: 2
            data_generator: |
              return entity.attributes.priceRating.hourly.entries.map((item) => {
                return [new Date(item.time), item.total * 100]
              });

This is one of the most awesome cards I’ve seen so far, thanks a lot and congratulation on your hard work!!

EDIT: Just realized that my request seems to be the exact same as NeoID right above here, sorry I didn’t see it.

I’ve got a question that I couldn’t really figure out an answer for. I’m trending tidewater observation and forecast, and would like the legend at the bottom to show the numbers at “now” instead of at the end of graph. Is that possible? See my example below.

image

@tormagj, @NeoID, this feature is available in the latest beta already, you can check the dev documentation for in_header: before_now or in_header: after_now

2 Likes

I’ll need to check that, please open a bug on github

yes:

apex_config:
  legend:
    show: false

Not at the moment, could you please open a feature request?

What you want is extend_to_end: false

That is not possible yet, please open a feature request :slight_smile:

1 Like

THanks for the quick replies. Feature requests done.

One more thing came up. Is it possible to fix the scale for the y-ticks. I can use apex_config.yaxis.tickAmount to set the number of ticks, but I would rather fix the separation (e.g. 25%) and minimum for chart and let the maximum be data dependent.