ApexCharts card - A highly customizable graph card

[Lunkobelix]

I’m getting a blank graph unfortuunately. Long term statistics just isn’t stable for me and not working fully yet…

type: custom:apexcharts-card
header:
  title: ''
  show: false
  show_states: true
graph_span: 7day
span:
  offset: +1d
...
series:
  - entity: sensor.last_meter_consumption
    name: Förbrukning per dag
    type: column
    color: fc7703
    statistics:
      type: sum
      period: day
      align: middle
    group_by:
      func: diff
      duration: 1d
      fill: last

Changing duration to “2d” gives me a graph but only data for every second day

[via2326 (Nico)]

Anyone able to help ?

[watermarkhu (Mark)]

I’ve fixed this issue for anyone looking for a solution on this. The reason is that the data_generator for the series in question had an issue, with one of the datapoints being invalid. Apparently the column type handles this just fine but a line or area won’t show if that is the case.

[watermarkhu (Mark)]

You can do that with the data_generator option for a series, and altering the x-axis in apex_config. You’ll need to write some javascript code. I did my prototype function in CodeSandBox with MomentJS .

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Hello. Does anyone know how to show only positive numbers? Thank you

[stevewrightnz (Steve)]

Hi all

I would like to display different backgrounds to a chart based on a helper which has a dropdown list.

I’m guessing I need to have different annotations blocks for each dropdown list value? I can’t seem to find an if then else function that will work for this.

Does anyone have a solution or suggestion that might work?

BTW. its for a meat thermometer and different types of meat

@stevewrightnz

[seanomat]

You are missing

group_by:
    start_with_last: true

I made a separate post about a dynamic statistics graph here:

Statistics Explorer with Apex Chart

I was very happy when long term statistics were introduced, however I am a little underwhelmed by the possibilities to explore, browse und visualize this data. Neither the statistics_graph card nor the energy-dashboard have a lot of flexibility. Inspired by several posts here, especially Dynamically select the number of hours or sensors to show on a history graph or mini graph card i tried to to create the “statistics explorer”. [image] [image] You select an entity, a timespan and a date, a…

[benm7 (Ben M)]

Would love to see your whole dashboard, this page looks great, I imagine the others are just as impressive!

[Lunkobelix]

Thanks a lot for the help and sharing how you do it! I’ll look into it and try to get Apex and long term statistics to work as good as it can. As I udnerstand it the problem right now is if I want a graph starting 1/1 2022 displaying one bar per month, that is still not doable?

[seanomat]

Yes, it is not possible right now.
It seems thou that it just takes very long to query and aggregate yearly data on a monthly level.
However it is possible to aggregate the same data on a daily level.
Not sure why the former would be more ressource intensive though. It should be the other way around.

[jn3va3 (Joe)]

I’m trying to get the radial gauge render similar to the apex example found here (the blue gauge in the screenshot)
https://apexcharts.com/javascript-chart-demos/radialbar-charts/stroked-gauge/

I’m not offsetting gauge rotation like the apex sample. I just want to use the alternating strokes for the fill. Is the stroke / dashArray supported yet? My results are the orange in the screenshot.

I tried using apex_config: to mirror the example and have tried various values for the dashArray value. If I use 100 for the dashArray value it looks like it does try to render but I can’t figure out how to config to get a similar look. Any ideas or suggestions?

type: custom:apexcharts-card
header:
  show: false
chart_type: radialBar
apex_config:
  plotOptions:
    radialBar:
      hollow:
        size: 70%
  fill:
    type: gradient
    gradient:
      shade: dark
      shadeIntensity: 0.15
      inverseColors: false
      opacityFrom: 1
      opacityTo: 1
      stopps:
        - 0
        - 50
        - 65
        - 91
  stroke:
    dashArray: 4
  legend:
    show: false
series:
  - entity: sensor.outside_temperature
    name: Outside Temp

[jn3va3 (Joe)]

SOLVED:

I needed to add “lineCap: flat”
to the stroke section

  stroke:
    dashArray: 4
    lineCap: flat

[berkans (Berkan Sezer)]

Will you share your code ? I want to see the example of as_duration.

[Lunkobelix]

Has anyone found a way to set the width of the radial bars? As seen below, the width of the lines are different depending on if I have 2 or 3 sensors displayed. Would have been nice to have them look the same:

[genunix (Filip Pytloun)]

Hello, does anyone know how to align xaxis to have shared tooltip?

I have this:

and want to have this:

According to docs, times of series must be aligned which is what I thought group_by is made for:

series:
  - entity: sensor.loznice_temperature
    name: Ložnice
    color: '#b33dc6'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.koupelna_teplomer_termostat_320
    name: Koupelna
    color: '#27aeef'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.sauna_teplomer_termostat_315
    name: Sauna
    color: '#ea5545'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.obyvak_temperature
    name: Obývák
    color: '#f46a9b'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.jidelna_temperature
    name: Jídelna
    color: '#edbf33'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.zimni_zahrada_teplomer_termostat_265
    name: Zimní zahrada
    color: '#87bc45'
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
  - entity: sensor.hutch_temperature
    name: Křepelky
    color: gray
    group_by:
      func: avg
      duration: 5m
      start_with_last: true
graph_span: 24h
all_series_config:
  stroke_width: 2
  fill_raw: last
header:
  title: Teplota
  standard_format: true
apex_config:
  legend:
    position: top
type: custom:apexcharts-card
view_layout:
  grid-area: chart-temperature

[Zalaban]

Is there a way to lock the timezone in the graphs?
I’m travelling and am quite a few timezone away from my data which is misrepresenting the results.

Local graph (the correct one, EST timezone):

Graph while on travel (different computer time)

Current code:

type: custom:apexcharts-card
series:
  - entity: sensor.history_pump_today
    name: pump
    type: column
    group_by:
      func: last
      duration: 1d
  - entity: sensor.history_heater_today
    name: heater
    type: column
    group_by:
      func: last
      duration: 1d
graph_span: 10d
stacked: true
span:
  end: day

[angusc (Chris)]

Hi Guys,
Im still hoping that soeone can advise me on the pop up infoirmation when hovering over the graph…?

But in the meantime I have has a few requests for the graph configuration so here it is:

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
stacked: true
header:
  show: true
  title: Solar Prod
all_series_config:
  show:
    extremas: false
series:
  - entity: sensor.envoy_1220xxxxxxxx_current_energy_consumption
    transform: return x *-1 ;
    type: column
    name: Consumption
    color: '#f37320'
    group_by:
      func: avg
      duration: 5min
  - entity: sensor.envoy_1220xxxxxxxx_current_energy_production
    type: column
    name: Production
    color: '#20a0f3'
    group_by:
      func: avg
      duration: 5min
  - entity: sensor.inst_energy_difference
    type: column
    name: Import (+) or Export (-)
    transform: return x *-1 ;
    color: '#646466'
    group_by:
      func: avg
      duration: 5min

And for the sensor.instant_energy_difference:

# Displays the difference between Solar production and Grid import

sensor:
- platform: template
  sensors:
      inst_energy_difference:
        friendly_name: Instant Energy Difference
        icon_template: >
          {% if (states("sensor.inst_energy_difference") | int(default=0) > 0) -%} 
            mdi:solar-panel
          {%- elif (states("sensor.inst_energy_difference") | int(default=0) < 0) -%}
            mdi:transmission-tower
          {%- else -%}
            mdi:power-off
          {%- endif %}
        friendly_name_template: >
          {% if (states("sensor.inst_energy_difference") | int(default=0) > 0) -%} 
            Currently Exporting
          {%- elif (states("sensor.inst_energy_difference") | int(default=0) < 0) -%}
           Currently Importing
          {%- else -%}
            Balanced
          {%- endif %}
        unit_of_measurement: "W"
        device_class: power
        value_template: >
          {{ '%0.1f' | format(states('sensor.envoy_1220xxxxxxxx_current_energy_production') | float(default=0) - states('sensor.envoy_1220xxxxxxxx_current_energy_consumption') | float(default=0)) }}

[alex3305 (Alex van den Hoogen)]

I want to migrate from the great mini-graph-card to this more advanced card. But I’m stuck with using non-numerical sensors. The repository readme states that those are supported, but I cannot find how. I currently have this in mini-graph-card:

Where I have the relative and absolute humidity plotted in the graph and using thermal comfort I can also display the current humidity. Can anyone elaborate on that or provide an example on how to do this?

[froggy.laurent]

hi all,
is there a way to increase the curve smoothness to something similar than minigraph

[Lunkobelix]

Try the following:

  - entity: sensor.whatever
    group_by:
      func: avg
      duration: 20min