ApexCharts card - A highly customizable graph card

[Marco_Lupieri]

form me not working. only one value on tooltip.

[SpeedyWRX]

Incredible! Works very well - thank you.

[SpeedyWRX]

Another question on your code/implementation. It appears the Apex Charts omits some data compared to the standard history graph. See attached picture. The only thing I see tell visually is that the filled in areas below (when the HVAC action is ‘cooling’) appear thinner on the Apex Charts and maybe that’s why the shorter time-spans are getting cut out? Rounding error or something?

[keilorca]

I don’t seem to be able to replicate that unfortunately. Try experimenting with the group_by: settings or remove that section altogether and see how you go.

[anon36468094]

Is there a way to only show the hours or minutes below the card? Also in the circle itself it shows % instead of hours, any way to change this? Thx

[Mahko_Mahko]

Hey guys, is there a way to overlay a single big number (Say current value of one of the series?). Would want to tinker with transparency etc.

I had a look through the thread but couldn’t spot anything? Ta.

[DaleC]

A little question that should probably be simple but I can’t seem to figure it out – if I have a pie/donut chart with a single entity source using percentage (in this case a battery sensor), how do I get the chart to render so the pie/donut shape reflects that percentage value?

For example, below I have a battery sensor entity with 75%, and the 75% value is displayed correctly in some text places on the chart, but the pie itself always shows a complete 100% chart.

Thanks.

[keilorca]

I haven’t gone in to how you would actually do this but a pie chart by design will show various values as a percentage of the total. If you only give it one value that value will always be 100% of the total no matter what the absolute reading is. I am assuming that you would have to provide two values eg, amount_full=75, amount_empty=25 or amount_empty=100 - amount_full.

[keilorca]

Probably best to ask this on GitHub.

[Mahko_Mahko]

What do you mean? Are you suggesting I should raise a feature request?

I’ve skimmed the documentation a few times and can’t see anything that seems to match?

[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']);"