ApexCharts card - A highly customizable graph card

Hi
I’m starting to play with this card and here is something I can’t manage: I would like to fill the area below a line depending on the status of a switch. So I added a series based on the switch status, transformed to get the value of the sensor. However, I only get a on/off type of chart!
Any idea of what I am doing wrong?
Here is the code:

header:
  show: true
  title: Bureau
  show_states: false
  colorize_states: true
all_series_config:
  stroke_width: 2
  type: line
  extend_to_end: true
series:
  - entity: sensor.temperature_bureau
    name: Température mesurée
    curve: smooth
    group_by:
      func: avg
      duration: 15min
  - entity: climate.bureau
    name: Consigne
    attribute: temperature
    curve: stepline
  - entity: switch.chaudiere
    transform: 'return x === ''on'' ? hass.states[''sensor.temperature_bureau''].state: 0;'
    type: area
    curve: stepline
    stroke_width: 0
    color: red

and the result:
Capture d’écran 2021-11-06 233800
thanks for your help!

This card is amazing. Thank you! I’ve been using it for a variety of graphs. I’m having a bit of trouble with the colorization of my air quality graph and was hoping form pointers. I know this is an experimental feature, and I would be happy with only colorizing the numbers in the header (if I could colorize both the lines and the numbers, that would be a bonus). Here’s the code:

type: custom:apexcharts-card
header:
  show: true
  title: Air Quality
  show_states: true
  colorize_states: true
experimental:
  color_threshold: true
series:
  - entity: sensor.waqi
    name: World AQI
  - entity: sensor.airnow_aqi
    name: AirNOW
  - entity: sensor.purpleair_outdoor_aqi_average
    name: PurpleAir
    curve: smooth
all_series_config:
  stroke_width: 2
  show:
    header_color_threshold: true
    legend_value: false
  color_threshold:
    - value: 0
      color: green
    - value: 50
      color: yellow
    - value: 100
      color: orange
    - value: 150
      color: red
    - value: 200
      color: purple
yaxis:
  - min: 0
    max: 200
    apex_config:
      tickAmount: 4

Here is the graph it generates:
image

Several questions:

  • Is there a way to fix the gradient of the coloring in the chart?
  • If the chart itself cannot be fixed, can I disable coloring for the chart but keep it for the numbers in the header?

Thank you, this worked perfectly!

That is possible if you use group_by with func: sum. It will sum all the values over duration. It might not be exactly what you are looking for though…

You’ll have to use card-mod for that. At least for now.

You assume that:
transform: 'return x === ''on'' ? hass.states[''sensor.temperature_bureau''].state: 0;' is using the history for the other sensor, but it’s not. hass.states[''sensor.temperature_bureau''].state always returns the latest value of the sensor, not the one aligned with the history point.

A suggestion might be to use a second y axis with min = 0, max = 1 to chart on/off with 0/1, but it’s going to take the whole height of the chart.

Yes, that is a bug in the library I use. Use fill_raw: last on each serie to fix it

2 Likes

thanks for your feedback
alternatively, is there a way to change the color of the line for sensor.temperature_bureau depending on the status of switch.chaudiere ?

Many thanks @RomRider! Here is my new code with the suggested bug fix and the AQI chart (for anyone who might be interested):

type: custom:apexcharts-card
header:
  show: true
  title: Air Quality
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
experimental:
  color_threshold: true
series:
  - entity: sensor.waqi_portland_oregon_usa
    name: World AQI
  - entity: sensor.airnow_aqi
    name: AirNOW
  - entity: sensor.purpleair_outdoor_aqi_average
    name: PurpleAir
    curve: smooth
all_series_config:
  stroke_width: 2
  show:
    header_color_threshold: true
    legend_value: false
  fill_raw: last
  color_threshold:
    - value: 0
      color: green
    - value: 50
      color: yellow
    - value: 100
      color: orange
    - value: 150
      color: red
    - value: 200
      color: purple
yaxis:
  - min: 0
    max: 200
    apex_config:
      tickAmount: 4

image

Hi Mattias,

thank you so much for sharing your amazing work. I finally managed to have the chart for my router traffic like I wanted (dynamic kb/mb). I merged the one I made with 2-3 things I learned from your code. So happy about the result. ApexCharts is amazing (great job @RomRider) and your use of it is really inspiring (Unifi Style Radial Sensor is gorgeous). :slight_smile:

image

The uptime tile is made with uptime-card and a binary_sensor. I was wondering if it could be made with ApexCharts, but it goes way beyond my ApexCharts knowledge, I just started…:slight_smile:

Thanks again to both of you, lot to learn now…

Alessandro

2 Likes
1 Like

Thanks a lot for the heads-up. I’m sure it will be available sooner or later. I’m very satisfied about uptime-card for now, so it’s not really a priority issue for me.

Hi.
I am using ApexCharts to display water heater data combined with power price.
My on/off logic is displayed using transform and area type.
My issue is that the area isn’t “closed” until the state has changed, so the area is not filled “until now” which is probably not a function.
I could use “until_end”, but this clutters the entire graph in my opinion.
Any suggestion on how to achieve a filled area graph showing the current state filled?
My code for just that entity included to show my transform and it is the orange area graph I am thinking of.

  - entity: climate.varmtvann
    name: Varmtvann på
    extend_to_end: false
    transform: 'return x === ''heat'' ? 1 : 0;'
    type: area
    curve: stepline
    color: orange
    fill_raw: last
    opacity: 0.3
    stroke_width: 3
    show:
      in_header: after_now
      legend_value: false
    yaxis_id: binary

I was thinking about introducing a “extend to now” feature, same as extend to end. Can you open a feature request on github please?

Hi all, I’m try to create a rainfall prediction chart (for the next hour) with openaweathermap rest sensor.
So I have a sensor with attribute like this:

Sensor - attribute
minutely: 
- dt: 1636658760
  precipitation: 0.2528
- dt: 1636658820
  precipitation: 0.2686
- dt: 1636658880
  precipitation: 0.2844
- dt: 1636658940
  precipitation: 0.3002
- dt: 1636659000
  precipitation: 0.316
- dt: 1636659060
  precipitation: 0.3258
- dt: 1636659120
  precipitation: 0.3356
- dt: 1636659180
  precipitation: 0.3454
- dt: 1636659240
  precipitation: 0.3552
- dt: 1636659300
  precipitation: 0.365
- dt: 1636659360
  precipitation: 0.3892
- dt: 1636659420
  precipitation: 0.4134
- dt: 1636659480
  precipitation: 0.4376
- dt: 1636659540
  precipitation: 0.4618
- dt: 1636659600
  precipitation: 0.486
- dt: 1636659660
  precipitation: 0.486
- dt: 1636659720
  precipitation: 0.486
- dt: 1636659780
  precipitation: 0.486
- dt: 1636659840
  precipitation: 0.486
- dt: 1636659900
  precipitation: 0.486
- dt: 1636659960
  precipitation: 0.486
- dt: 1636660020
  precipitation: 0.486
- dt: 1636660080
  precipitation: 0.486
- dt: 1636660140
  precipitation: 0.486
- dt: 1636660200
  precipitation: 0.486
- dt: 1636660260
  precipitation: 0.5012
- dt: 1636660320
  precipitation: 0.5164
- dt: 1636660380
  precipitation: 0.5316
- dt: 1636660440
  precipitation: 0.5468
- dt: 1636660500
  precipitation: 0.562
- dt: 1636660560
  precipitation: 0.562
- dt: 1636660620
  precipitation: 0.562
- dt: 1636660680
  precipitation: 0.562
- dt: 1636660740
  precipitation: 0.562
- dt: 1636660800
  precipitation: 0.562
- dt: 1636660860
  precipitation: 0.562
- dt: 1636660920
  precipitation: 0.562
- dt: 1636660980
  precipitation: 0.562
- dt: 1636661040
  precipitation: 0.562
- dt: 1636661100
  precipitation: 0.562
- dt: 1636661160
  precipitation: 0.5792
- dt: 1636661220
  precipitation: 0.5964
- dt: 1636661280
  precipitation: 0.6136
- dt: 1636661340
  precipitation: 0.6308
- dt: 1636661400
  precipitation: 0.648
- dt: 1636661460
  precipitation: 0.648
- dt: 1636661520
  precipitation: 0.648
- dt: 1636661580
  precipitation: 0.648
- dt: 1636661640
  precipitation: 0.648
- dt: 1636661700
  precipitation: 0.648
- dt: 1636661760
  precipitation: 0.648
- dt: 1636661820
  precipitation: 0.648
- dt: 1636661880
  precipitation: 0.648
- dt: 1636661940
  precipitation: 0.648
- dt: 1636662000
  precipitation: 0.648
- dt: 1636662060
  precipitation: 0.6308
- dt: 1636662120
  precipitation: 0.6136
- dt: 1636662180
  precipitation: 0.5964
- dt: 1636662240
  precipitation: 0.5792
- dt: 1636662300
  precipitation: 0.562
- dt: 1636662360
  precipitation: 0.5468

friendly_name: openweathermap_report

the apexchart card:

type: custom:apexcharts-card
graph_span: 1h
span:
  start: minute
header:
  show: true
  title: Precipitation Forecast Next Hour
series:
  - entity: sensor.openweathermap_report
    curve: smooth
    type: area
    color: '#4682b4'
    data_generator: |
      console.log(entity);
      return entity.attributes.minutely.map((entry) => {
        return [new Date(entry.dt).getTime(), entry.precipitation];
      });
    opacity: 0.4

but what I get is not what I expect, it appears that only the last value is being processed.
image

I can’t understand my mistake…

I use APEX card a lot on my lovelace views, super work.

With all the new energy long term statistical entities I would like to get some long term graphs. However the “statestical graph card” have very little functionality.

Is it possible to get the long term statestical information for the entities and use that as input in APEX?

Sure, will do.
Thanks :slight_smile:

There is a PR on github that I need to review to support long term statistics. It’s a bit complex so I will need to take some time to review it, but it’s going to land, no worries :slight_smile:

Could it be that the timestamps are already offset by your timezone (they are expressed as being in your timezone directly)? Could you tell me what is your timezone please so I can check if that is the case?

Eg:
1636662360 (the first entry) is Thursday, November 11, 2021 8:26:00 PM in GMT timezone. Is that correct?

Thanks RomRider for the reply.
My time zone is GMT + 1 (Italy).
I had thought of a problem related to the date and, through the website www.epochconverter.com, I converted the date but it is correct (afaik).
Example:

  • now (16:58 local time)
  • the first value is 1636732560 which should be “November 12, 2021 16:56:00 GMT + 01:00”
  • the last value is 1636736160 which should mean “November 12, 2021 17:56:00 GMT + 01:00”

But the result is this:
image

Anyway, I also tried to widen the time in the graph but it doesn’t change anything. :frowning:

Sorry for the double post but I can not attach more than one image.

Can you try that as your data generator please:

      return entity.attributes.minutely.map((entry) => {
        return [entry.dt * 1000, entry.precipitation];
      });

Oh great! Now it works fine thanks! :slight_smile:
So, to better understand, it was due to “dt attribute” that was not formatted well (milliseconds were missing)?

Image

Correct, the timestamp has to be in ms, I didn’t catch it first :slight_smile: