ApexCharts card - A highly customizable graph card

[Mahko_Mahko]

Dunno if there is a better way but this should work.

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
apex_config:
  plotOptions:
    pie:
      donut:
        total:
          show: true
          showAlways: true
chart_type: pie
series:
  - entity: sensor.esp_humidity_bathroom
    name: fake %full  
  - entity: sensor.esp_humidity_bathroom
    name:  fake  %empty
    transform: "return 100 - x ;"

[rindlerblabla]

Anyone who knows if it’s possible to make the dashed “Now-line” wider? Have tried with stroke_width but obviously it’s not working.

[keilorca]

@Mahko_Mahko

Are you suggesting I should raise a feature request?

Probably wouldn’t hurt.

[Mahko_Mahko]

So you can kind of fake it like this.

Can’t figure out how to send the big number to the background or set it’s transparency though.

type: custom:apexcharts-card
graph_span: 48hr
apex_config:
  chart:
    height: 250px
  legend:
    show: false
  grid:
    show: false
  dataLabels:
    enabled: true
    offsetX: -100
    offsetY: 23
    opacity: 0.5
    style:
      fontSize: 180px
      colors:
        - '#7a7a7a'
    background:
      enabled: false
  yaxis:
    - show: true
      decimalsInFloat: 0
      forceNiceScale: true
      min: 0
series:
  - entity: sensor.senseair_co2_value
    color: white
    curve: stepline
    show:
      datalabels: true
    opacity: 0
    name: latest
    group_by:
      func: last
      duration: 48hr
    transform: return x ;
  - entity: sensor.senseair_co2_value
    color: white
    curve: stepline
    show:
      in_header: false
      extremas: true
    stroke_width: 1.5
    opacity: 0.8
    float_precision: 0
    name: CO2
    group_by:
      func: median
      duration: 30min

[DaleC]

Nice! Thank you very much!

[keex]

Here’s my full configuration, and a picture to prove it:

Although, I have found that it is finicky and not always reliable with all chart types. E.g. I still can’t get my bar chart to display a single tooltip for all values. The key to success seems to be having existing data points at the same timestamps, which in my case was achieved by the group_by function.

type: custom:apexcharts-card
graph_span: 12h
header:
  show: true
  show_states: true
  colorize_states: true
apex_config:
  grid:
    show: false
  legend:
    show: false
  tooltip:
    shared: true
  chart:
    height: 100px
  yaxis:
    - id: temperature
      tickAmount: 2
      max: EVAL:max => max
      min: EVAL:min => min
      labels:
        formatter: |
          EVAL:v => `${Math.round(v)}°C`
all_series_config:
  stroke_width: 2
  opacity: 0.8
  group_by:
    func: avg
    duration: 1min
    fill: last
series:
  - entity: sensor.temperature_sensor_1_temperature
    color: orange
    name: Bathroom
  - entity: sensor.temperature_sensor_2_temperature
    color: dodgerblue
    name: Attic
  - entity: sensor.temperature_sensor_3_temperature
    color: red
    name: Living room
  - entity: sensor.temperature_sensor_4_temperature
    color: green
    name: Outside

[markcocker]

I have added ApexCharts Card templates using the Home Assistant ‘raw configuration editor’ and the ApexCharts Card picks them up fine. However, every time I restart Home Assistant, the templates are removed by some process and the card says the template is missing. If I manually add them back after this point it they are not removed again, until the next restart.

Does anyone else experience this? It only started happening a month or two ago.

Should I switch from using the raw configuration editor to switching to YAML mode and creating a separate config>/ui-lovelace.yaml file as mentioned at Dashboards - Home Assistant ?

Update: This is now seems to be fixed after upgrading HA to core-2021.9.6, supervisor-2021.09.0, and Home Assistant OS 6.4.

[geidorei]

Hi - is it possible to centre the graph after I have reduced the size of the donut, as below?

[tom_l]

Is it possible to hide single series names from the legend?

I don’t need the 10th and 90th percentile labels in the legend:

Also is it possible to stack only two series in a graph?

That way I could generate and area for FF90-FF10 and stack it on top of a line FF10 (with 0 line weight) to achieve this sort of result:

Closest I can get for now:

It appears the stack option is applied to the chart level, not the yaxis level, so I don’t think this is possible.

[arifroni]

hello

i want to plot a pie chart. i have 4 power monitor sensors. TV, nuc, LED. ENT is sum of these three sensors and some other devoces. i want to plot a pie chart with these three and rest of the devices. how can I wrote that in transform?

          - type: custom:apexcharts-card
            header:
              show: false
              title: ApexCharts-Card
              show_states: false
              colorize_states: true
            apex_config:
              plotOptions:
                pie:
                  donut:
                    total:
                      show: true
                      showAlways: true
            chart_type: pie
            series:
              - entity: sensor.yearly_energy_nuc
                name: NUC
              - entity: sensor.yearly_energy_led
                name: LEDs
              - entity: sensor.yearly_energy_tv
                name: TV
              - entity: sensor.yearly_energy_ent
                name: ALL
                transform: "return x - (hass.states['sensor.yearly_energy_nuc']+hass.states['sensor.yearly_energy_nuc']+hass.states['sensor.yearly_energy_nuc']);"

[ekerjax]

@arifroni I have had a similar problem. I think you need to add .state: hass.states['sensor.yearly_energy_nuc'].state

Maybe you need use parseFloat like: parseFloat(hass.states['sensor.yearly_energy_nuc'].state)

This is my test:

            series:
              - entity: sensor.ble_temperature_a4c138cf053b
                transform: "return parseFloat(x) + parseFloat(hass.states['sensor.ble_humidity_a4c138cf053b'].state);"

Regards.

[Dazman1]

I can’t seem to get the min/max working for a series if only one is defined and the other is left to auto.

I.e. my goal is to set min to 0 and max to auto.

1. If I set min to 0 and do not add max to the config, the y-axis doesn’t start at zero
2. If I set min to 0 and max to 10, the y-axis does range from 0 to 10 correctly
3. If I set min to 0 and set max to auto, the y-axis doesn’t start at zero

Is there a bug with this? I’m fairly certain i’m configuring it correctly as it sets the y-axis correctly when both min and max are defined.

[Mustafa_Fathy (Moustafa Fathy)]

Did anyone reach to make like this chart…?
I tried to make a workaround on line chart but i couldn’t reach.

[arifroni]

thanks. problem solved.

[DerekO]

Hi.
I’m trying to use the color_threshold feature of apexcharts, just like in the example in the readme.

I’ve got a couple of cards setup for my fridge/freezer, an example as follows:

type: custom:apexcharts-card
graph_span: 120h
experimental:
  color_threshold: true
header:
  show: true
  title: Fridge
  show_states: true
series:
  - entity: sensor.fridge_temp_sensor_temperature
    show:
      extremas: true
    color_threshold:
      - value: 9.5
        color: red
      - value: 4
        color: orange
      - value: 0
        color: green
      - value: -20
        color: blue

This doesn’t display as per the example though - it looks like this:

What am I doing wrong?

Thanks

[splitti (Olli)]

Hey, i want to user 1 week of data, but auto zoom in to 24 or 48h automaticly. Is this possible?

[tom314]

Hi, great card, very useful and really well done. Thank you
I’m having an issue though when plotting light data with a logarithmic y-axis. The data ranges between ~100,000 and ~0.001, all the data above 1 plots fine, the data below 1 does not. It looks like the plots will only go down to 1, am I missing something or is this a bug?

It can be shown by the following card

type: custom:apexcharts-card
y_axis_precision: 3
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
yaxis:
  - id: first
    apex_config:
      logarithmic: true
      forceNiceScale: false
series:
  - entity: sun.sun
    yaxis_id: first
    data_generator: >-
      const data = [[moment(),1000],[moment().subtract(1,
      'hours'),100],[moment().subtract(2, 'hours'),10],[moment().subtract(3,
      'hours'),1],[moment().subtract(4, 'hours'),0.1],[moment().subtract(5,
      'hours'),0.01],[moment().subtract(6, 'hours'),0.1],[moment().subtract(7,
      'hours'),1],[moment().subtract(8, 'hours'),10],[moment().subtract(9,
      'hours'),100],[moment().subtract(10, 'hours'),1000]];  return data;

[khvej8]

Hi All,

Im sure it is simple, however after looking into this thread and into the documentation I can not figure out. I would like to remove the values from the x-axis. I can remove yaxis values with the show command. I have been looking into the examples, not finding it.

Basically, like the graph shown as an example in the first post here:-) I can do all the rest, not removing the x axis values.

[hajo62 (Hajo)]

I wonder how to calculate the min and max values used to the axis by my own. I found an example like that.
max: EVAL:max => max
But how would I do more advanced calculations like
${Math.round(max)}
My goal is to have integer values on the axis which are not rounded…
The exmple below show, that just doing a round causes sometimes 5 and sometime 4 degree difference from value to value.

[snagytx]

I have a sensor that resets daily, like - bandwidth usage. This sensor is updated multiple times a day, maybe 5-6 times.

I can build a chart with:

group_by:
   func: last
    duration: 1d

to get a daily usage. I can also use the max func, but I guess last requires less processing cycles.

Question:

How do I create a weekly usage? I would need a sum of daily max?

I guess I would use:

group_by:
   func: XXXX
    duration: 1w

but I don’t find a XXX function to do sum of daily max - or I’m missing another approach? I would try to stay away from creating another sensor to keep the usage for that week and resets every week.

Thanks.