ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
665

If I leave only the offset like for Avant-hier in my example I to have the temperature from the end of day and not at the same hour 2 days before.
When I remove only data_generator (Hier) I have N/A .
My goal is to have the temperatures at the same time ( current time for Today ) for last 3 days.
image

type: 'custom:apexcharts-card'
apex_config:
  legend:
    show: false
color_list:
  - red
  - deepskyblue
  - dimgray
graph_span: 1d
span:
  start: day
header:
  show: true
  title: Température Ext. sur 3 jours
  show_states: true
  colorize_states: true
series:
  - entity: sensor.0x158d000678e709_temperature
    name: Aujourd'hui
    extend_to_end: false
    stroke_width: 4
  - entity: sensor.0x158d000678e709_temperature
    offset: '-1d'
    stroke_width: 3
    name: Hier
    show:
      in_header: before_now
  - entity: sensor.0x158d000678e709_temperature
    offset: '-2d'
    name: Avant-hier
    stroke_width: 2
now:
  show: true
  color: '#ff0000'
  label: Now
1 Like
666

Hi,

Is it possible to have the min/max of the y-axis determined through some equation? What i would like is to have a fixed range (e.g. 20-24) but if the data happen to be crazy one day and exceed that, then it would rescale. So something like

ymin= min(20,min(data in range))

Thanks!

667

Actually something I have wanted too.

I have the outdoor temp showing in a graph. I would like min=0 unless it is minus degress outside, then I would like minus on the y-axis.

668

Ah I see, I didn’t take into account the series with an offset defined. I’ll fix that.

That would be something like “soft” min/max. I’ll see what I can do, but ApexCharts doesn’t provide that feature natively. It’s possible though, just a bit more compute heavy :slight_smile:

1 Like
669

Great card!!!

I’ve played a bit with it and have started looking into templates. I split the template yaml into a separate file and thought ‘Let’s go hunting for great examples on the web and generate a very nice set’. However, it seems like that very few have started using that feature…?

Do you know of a place where we can find some inspiration? Can we perhaps include a “templates.yaml” file in the repo? :smiley:

670

:tada::tada: New Release :tada::tada:

1.8.1 (2021-03-04)

Bug Fixes

  • in_header: after/before_now not working with offsetted series (960b43c)
1 Like
671

Maybe it’s a silly question, but why after/before_now and not current as well?
I’m currently using some template trickery in combination with raw in order to get the current value.

672

Just wonderful, now I have the temperature as expected, thank you @RomRider !
One remarque :
I think that it’s since v1.8 ( or maybe it was like that always and I just didn’t notice ) that there is bigger space between the line NOW and the last record:
Only cosmetic issue anyway:
image

673

It’s just that the last state change for your temperature is further back in time (meaning it didn’t happen “now” but some minutes ago).

I’d have to introduce a extend_to_now of some sort :slight_smile:

1 Like
674

Not sure I understand what you are doing. The value is never exactly “now” (in milliseconds) so you have to chose if you want to display the value just before or just after now (in milliseconds) based on your use case. The chart only displays state changes and connects those state changes with a line, it has no way to know what is in between the points.
Those “before_now/after_now” are only useful if you offset series/use data_generator. Else if you don’t set any value it’s always the last value in the chart, which is usually “now”.

675

I have this problem after update to 1.8.1
Immagine1
each sensor are set to type: area.

676

Share your config (PS: it’s unrelated to 1.8.1)

677 
- type: custom:apexcharts-card
            header:
              show: true
              title: Speedtest
              show_states: true
              colorize_states: true
            graph_span: 2d
#            span:
#              end: day
            apex_config:
              responsive:
                - breakpoint: 421  
                  options:
                    chart:
                      height: 180px 
                - breakpoint: 10000
                  options:
                    chart:
                      height: 180
              legend:
                show: false
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            style: |
              ha-card {
                height: 260px !important;
                margin-top: -15px;
                background-color: transparent
              }
            series:
              - entity: sensor.speedtest_download
                name: Download
                stroke_width: 2
                curve: smooth
                opacity: 0.2
                fill_raw: last
                color: green
                type: area
                group_by:
                  func: raw
                  duration: 10min
              - entity: sensor.speedtest_upload
                name: Upload
                stroke_width: 2
                curve: smooth
                opacity: 0.2
                fill_raw: last
                type: area
                group_by:
                  func: raw
                  duration: 10min
678

Doesn’t seem to be the config you have shown the picture from. Colors do not match, neither does the title.

Also that doesn’t do anything (group_by doesn’t do anything with raw):

                group_by:
                  func: raw
                  duration: 10min
679

I have a sensor with a list of electricity prices per hour.
The data is structured like so:

entries:
    - time: '2021-03-03T00:00:00+01:00'
      timeText: '00:00-01:00'
      energy: 0.3924
      total: 0.4983
      difference: -1.8128078817733808
    - time: '2021-03-03T01:00:00+01:00'
      timeText: '01:00-02:00'
      energy: 0.3876
      total: 0.4924
      difference: -3.089942924621141
    - time: '2021-03-03T02:00:00+01:00'
      timeText: '02:00-03:00'
      energy: 0.3865
      total: 0.491
      difference: -3.498427672955984
    - time: '2021-03-03T03:00:00+01:00'
      timeText: '03:00-04:00'
      energy: 0.3865
      total: 0.491
      difference: -3.6120926580290558

Plotting it gives me this chart with data both back and forward in time.
image

The “Now” flag is on a particular hour, but the after/before_now returns either the value before OR after the current hour… so I ended up using raw and this value_template which returns the correct value for “now”:

    value_template: >-
      {{((value_json.data.me.home.subscription.priceRating.hourly.entries | 
          selectattr('time', 'equalto', now().strftime('%Y-%m-%dT%H:00:00+01:00')) | 
          list)[0].total * 100) | 
          round(2)
      }}

I might have misunderstood how this is supposed to work, but at least it seems to work for me… :stuck_out_tongue:

680

Now is never aligned to any hour, it’s aligned with the exact current time.
Just use before_now and you’ll get the same result :wink:

1 Like
681

Strange, I was so sure that I tried before_now and it gave me the wrong result, but of cause… your right and it works. I admire your work @RomRider, thanks a ton! :slight_smile:

682

Sorry, this is the correct config.

          - type: custom:apexcharts-card
            header:
              show: true
              title: Temperature Zona Notte
              show_states: true
              colorize_states: true
            graph_span: 2d
#            span:
#              end: day
            apex_config:
              responsive:
                - breakpoint: 421  
                  options:
                    chart:
                      height: 300px 
                - breakpoint: 10000
                  options:
                    chart:
                      height: 260
              legend:
                show: false
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            series:
              - entity: sensor.camera_temperatura
                name: Camera
                type: area
                stroke_width: 2
                curve: smooth
                opacity: 0.2
                fill_raw: last
                group_by:
                  func: raw
                  duration: 10min
              - entity: sensor.cameretta_temperatura
                name: Cameretta
                type: area
                stroke_width: 2
                curve: smooth
                opacity: 0.2
                fill_raw: last
                group_by:
                  func: raw
                  duration: 10min
683

You screenshot seems to be using a line, not an area. Aren’t you using some config_templates? The only way to have a transparent line like this is if the type is a line.

684

No, i not using any config_templates.
I try to change area with column, but remain the same, a transparent line.
i have this problem after upgrate to 1.8.0