ApexCharts card - A highly customizable graph card

that works
:joy::+1:

my example was for yaml file. In case gui mode use that

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
experimental:
  color_threshold: true
series:
  - entity: sensor.your_sensor
    type: line
    stroke_width: 3
    color_threshold:
      - value: 20
        color: cyan
      - value: 30
        color: yellow
      - value: 100
        color: red
    extend_to: now
    show:
      header_color_threshold: true
span:
  offset: +1min
apex_config:
  tooltip:
    followCursor: true
    x:
      show: false
  xaxis:
    tooltip:
      enabled: true
  grid:
    show: false
graph_span: 1h
now:
  show: true
  label: now
  color: red
show:
  last_updated: true
  loading: true

@RomRider love your work :grinning:

Just wondering whether you still maintain a backlog feature/wishlist? I know you’ve done this in the past. Adding Home Assistant local / server timezone support would be great as there seems to be plenty of interest in it.

Here is an example of the problem using the Sun2 integration. This apexchart is viewed locally, in the same timezone as the Home Assistant server. The sunrise is shown correctly
Local_View

Here is the same apexchart, viewed at the same time but from a different timezone from the Home Assistant server. You will not the sunrise is not shown correctly as the client time is used, rather than the server time.
Remote_View

How to change font size?

2024-04-04_12-47-15

  - type: custom:apexcharts-card
    chart_type: donut
    update_interval: 60s
    apex_config:
      legend:
        show: false
      dataLabels:
        formatter: |
          EVAL:function(value) {
            return value.toFixed(1) + "%";
          }            
      plotOptions:
        pie:
          donut:
            size: 50%
            labels:
              show: true
              total:
                show: true
                label: Total Power
                formatter: |
                  EVAL:function(w) {
                    return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(2) + " W"
                    }

I’m trying to get my pie chart to show me the current used Wattage followed by the entity name.

type: custom:apexcharts-card
chart_type: pie
series:
  - entity: sensor.stopcontact_wasmachine_huidig_gebruik
    name: Aquarium
  - entity: sensor.stopcontact_droogkast_huidig_gebruik
    name: Droogkast
apex_config:
  chart:
    height: 300px
  legend:
    show: false
  dataLabels:
    enabled: true
    style:
      fontSize: 9px

image

I’ve tried for instance this code but I only get the percentage (followed by the requested ‘W’):

formatter: |
      EVAL:function (val) {
        return val.toFixed(0) + " W";
      }

image

Does anyone here know how I can fix this?

Try:

type: custom:apexcharts-card
chart_type: pie
series:
  - entity: sensor.stopcontact_wasmachine_huidig_gebruik
    name: Aquarium
    show:
      datalabels: percent
  - entity: sensor.stopcontact_droogkast_huidig_gebruik
    name: Droogkast
    show:
      datalabels: percent
apex_config:
  chart:
    height: 300px
  legend:
    show: false
  dataLabels:
    enabled: true
    style:
      fontSize: 9px

This gives me the same result.
To clarify: I don’t want to know the percentages inside the pie chart.
I only want to see the actual Wattage followed by a W and the entity name.
Example: 73 W - Droogkast

Yeah… I misread… it took me a while to find this again but…

type: custom:apexcharts-card
chart_type: pie
series:
  - entity: sensor.stopcontact_wasmachine_huidig_gebruik
    name: Aquarium
    show:
      datalabels: percent
  - entity: sensor.stopcontact_droogkast_huidig_gebruik
    name: Droogkast
    show:
      datalabels: percent
apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value, opt) {
        return opt.w.config.labels[opt.seriesIndex] + ":" + value.toFixed(1) + " W ";
      }

and donot ask how this works …no clue, just copied it :slight_smile:

Unfortunately this is what I get when I try your code:
image
I once saw something similar to your code (which did exactly what I wanted) but didn’t save it for now :man_facepalming:t2:
I also don’t realy understand how the code works…

with my sensors it shows like this … I did not take time to properly rename your part fo the code :slight_smile:

So you get the same result as me. When you add both values you get 100%.
There should be Droogkast: 153 W and Aquarium 124 W mentioned on the pie chart, the same values as shown in the legend.
I just want to hide the legend (for a cleaner look imo) and get those values in the chart.

U vraagt wij leveren … I started to understand the code (a bit)
try this

apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value, opt) {
        return opt.w.config.labels[opt.seriesIndex] + ":" + opt.w.globals.seriesTotals[opt.seriesIndex] + " W ";
      }

Yes, that’s it!
Thanks a lot for your help vingerha :star_struck:

In your browser, click the left menu, choose your “profile” change Timezone to Server-time

How can I get rid of all this whitespace?

2024-04-04 22_15_13-Overview – Home Assistant — Mozilla Firefox

type: custom:apexcharts-card
chart_type: radialBar
apex_config:
  chart:
    height: 350px
  fill:
    type: gradient
    gradient:
      shade: dark
      shadeIntensity: 0.15
      inverseColors: false
      opacityFrom: 1
      opacityTo: 1
      stopps:
        - 0
        - 50
        - 65
        - 91
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: -90
      endAngle: 90
      hollow:
        size: 30%
  stroke:
    dashArray: 2.5
    lineCap: flat
  legend:
    show: false
  grid:
    padding:
      left: 0
      right: 0
      bottom: 0
header:
  show: true
  title: UnRaid
  show_states: true
  colorize_states: true
series:
  - entity: sensor.192_168_1_145_mnt_disk1_used_percent
    name: Disk Used
    show:
      in_header: true
      legend_value: false
  - entity: sensor.192_168_1_145_mnt_disk1_free
    name: Disk Free
    show:
      in_header: true
      in_chart: false
  - entity: sensor.192_168_1_145_ram_used_percent
    name: Memory
    show:
      in_header: true

  stroke:
    dashArray: 0

That’s the point, it doesn’t work!

ohh, sorry to hear, i haven’t really checked, because im running “local” so client/server is always the same :slight_smile:

hi guys, I’m looking for a card like this, I copied the code directly from the official website but it doesn’t work, can anyone help me?

start with this
https://ui-lovelace-minimalist.github.io/UI

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_apexcharts/