ApexCharts card - A highly customizable graph card

poudenes · February 26, 2021, 8:08am

apexcharts_card_templates

Can you add anything in the template?

I want add this also in the template:

float_precision: 5
unit: EUR
group_by:
  func: avg
  duration: 5min
show:
  extremas: true

          - type: 'custom:apexcharts-card'
            config_templates: bandwidth_chart
            header:
              title: ADA / EUR - Last 24 hours
            series:
              - entity: sensor.eur_ada
                name: Buy
                float_precision: 5
                unit: EUR
                group_by:
                  func: avg
                  duration: 5min
                show:
                  extremas: true
                attribute: buy
              - entity: sensor.eur_ada
                name: Sell
                float_precision: 5
                unit: EUR
                group_by:
                  func: avg
                  duration: 5min
                show:
                  extremas: true
                attribute: sell

to this

          - type: 'custom:apexcharts-card'
            config_templates: bandwidth_chart
            header:
              title: ADA / EUR - Last 24 hours
            series:
              - entity: sensor.eur_ada
                name: Buy
                attribute: buy
              - entity: sensor.eur_ada
                name: Sell
                attribute: sell

poudenes · February 26, 2021, 8:13am

apexcharts_card_templates:
  default:
    color_list:
      - green
      - red
  bandwidth_chart:
    graph_span: 24h
    config_templates: default
    cache: true
    y_axis_precision: 5
    header:
      show: true
      show_states: true
      colorize_states: true
    all_series_config:
      stroke_width: 1
      float_precision: 5
      unit: EUR
      group_by:
        func: avg
        duration: 5min
      show:
        extremas: true

Added the lines all the time below the wrong line… This is working what I see

bgrr · February 26, 2021, 10:30am

Is it possible to get data from a mssql server instead of data from HA ?
So i can show a graph in HA with data from the mssql server.

RomRider · February 26, 2021, 10:49am

this is only based on home-assistant’s history, but you can use the SQL component to create entities based on SQL data.

bschatzow · February 26, 2021, 1:58pm

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.

kruton · February 26, 2021, 5:52pm

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!

RomRider · February 26, 2021, 7:04pm

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?

bschatzow · February 26, 2021, 8:35pm

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.

kruton · February 27, 2021, 7:47am

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

Mariusthvdb · February 27, 2021, 4:45pm

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!

Tdw · February 27, 2021, 5:03pm

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

Mariusthvdb · February 27, 2021, 8:44pm

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';

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

Tdw · February 28, 2021, 8:01pm

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.

RomRider · February 28, 2021, 8:05pm

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

Potterstraat · March 1, 2021, 7:49pm

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.

Lunkobelix · March 1, 2021, 8:02pm

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

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

wigster · March 1, 2021, 10:38pm

Hi

This is great! Who needs jupyter and matplotlib?

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.

Manu3b · March 2, 2021, 8:01am

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.

NeoID · March 2, 2021, 8:40am

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.

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.

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]
              });

tormagj · March 2, 2021, 10:42am

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.