ApexCharts card - A highly customizable graph card

[jskjorvestad (Skjorv)]

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
chart_type: donut
series:
  - entity: sensor.power_alle_varmekabler
    data_generator: ""
  - entity: sensor.hoiax300_estimated_power
    data_generator: ""
  - entity: sensor.total_power_radiator_consumption
    data_generator: ""
  - entity: sensor.dishwasher_energy_consumption
    data_generator: ""
  - entity: sensor.remaining_power
    name: Other
    data_generator: ""

In this donut chart, how do I hide the entity if it has no value/is 0?
And is it possible to get % of a entity under the current value?

[basara]

Hi Everyone,

Does anyone know if Apexcharts can do stacked horizontal bar charts like the one shown here?

Thanks

[scw2wi (Walter Schlögl)]

I changed my bucket from 1 to 2 days, now it’s showing something, but still not the difference between the days. I can’t believe that a solution is so difficult.

[vingerha]

You have to play around. I have no clue about your data-sets and with me it works fine with values that are only delivered once a day.
group

[thorstenniemann.tn]

Hello, I have a graph for the electricity price and get an error in the developer console from the browser

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
  chart:
    height: 250px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
header:
  show: true
  title: Strompreis
  show_states: true
  colorize_states: true
  standard_format: false
graph_span: 48h
now:
  show: true
  color: 9E9E9E
span:
  start: day
series:
  - entity: sensor.tibber_prices
    name: Preis
    show:
      in_header: before_now
      name_in_header: false
    color_threshold:
      - value: 0
        color: 4DD0E1
      - value: 10
        color: 26A69A
      - value: 15
        color: 4CAF50
      - value: 20
        color: 7CB342
      - value: 25
        color: FBC02D
      - value: 30
        color: EF6C00
      - value: 40
        color: B71C1C
    type: line
    curve: stepline
    extend_to: false
    stroke_width: 2
    float_precision: 2
    data_generator: |
      const noon = new Date()
      noon.setHours(0, 0, 0, 0)
      const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
      const data = [];
      for(let i = 0; i < prices.length; i++) {
        data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
      }
      return data;

[scw2wi (Walter Schlögl)]

Thanks for the hint, this showed me the solution. start_with_last was missing, now it’s working fine.

[BigStephan]

Hey there,

i have some charts in which are 2 or 3 entitys.
Over a period of time (maybe in winter) some of these entitys are not existing (for example a smart plug which i disconnected from grid in winter outside).
Problem is that ApexCharts now throws an error when trying to show these charts (in which 1 entity is available and another not).
Is it possible to ignore the missing entity an show the chart anyway (maybe a configuration option) with the existing entity?

br

[aigle92]

Hello,
I have a chart with color_threshold.

Is-it possible to match the datalabel color with the diagram color threshold (in the following example, it seems to use the last value, orange for all datalabel color) ?

type: custom:apexcharts-card
experimental:
  color_threshold: true
update_interval: 1d
graph_span: 7d
span:
  end: day
  offset: "-1d"
series:
  - entity: sensor.sql_linky_consumption_last7d
    show:
      datalabels: true
    type: column
    color_threshold:
      - value: 0
        color: "#00796b"
      - value: 10
        color: "#7cb342"
      - value: 20
        color: "#28b463"
      - value: 30
        color: "#ffeb3b"
      - value: 40
        color: "#fdd835"
      - value: 50
        color: "#fbc02d"
      - value: 60
        color: "#f9a825"
      - value: 70
        color: "#ef6c00"
      - value: 80
        color: "#d84315"
      - value: 100
        color: "#b71c1c"
    data_generator: |
      return JSON.parse(entity.attributes.json_result);

[Peethiplatsch]

Thanks a lot. Funny is after I asked again, I installed the 2025.2 and there it worked. as seen in the screenshot.

Now with 2025.2.1 its not working anymore. I did not update anything in the code, that is odd.
Anybody an idea if this could be a Home Assistant issue? If so, I would open an issue there.

[kravalli7]

Hi all,
first thanks for that amazing project. I just want to share my card with you and have some questions. I have 2 apex charts side by side one with my body weight from last week and one with my body weight from this week. In both of them there is the corresponding week average. I have noticed that on mondays there is obviously only one plot for the current week although this one is very big. This fixes itself as soon as there is a second datapoint (i.e. tuesday), however this looks really weird as you can see in the screenshot. Furthermore the right chart for the current week labeled “Diese Woche” takes much longer to load than the left one for last week, does anybody have any idea what could cause this.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:apexcharts-card
    header:
      show: true
      floating: true
      title: Letzte Woche
    series:
      - entity: sensor.weight
        type: column
        group_by:
          func: last
          duration: 1d
        show:
          datalabels: true
      - entity: input_number.average_weight_last_week
        type: line
        offset: +7d
        time_delta: "-12h"
        stroke_width: 2
        group_by:
          func: last
          duration: 7d
    graph_span: 7d
    hours_12: false
    layout: minimal
    apex_config:
      tooltip:
        enabled: false
      chart:
        offsetY: 10
      yaxis:
        show: true
        min: 65
        max: 90
        tickAmount: 6
      legend:
        show: false
      dataLabels:
        enabled: true
        offsetY: -10
        style:
          fontSize: 10px
        background:
          enabled: true
          opacity: 0
    span:
      end: isoWeek
      offset: "-7d"
  - type: custom:apexcharts-card
    header:
      show: true
      floating: true
      title: Diese Woche
    series:
      - entity: sensor.weight
        type: column
        group_by:
          func: last
          duration: 1d
        show:
          datalabels: true
      - entity: sensor.average_weight
        type: line
        extend_to: end
        time_delta: "-12h"
        stroke_width: 2
        group_by:
          func: last
          duration: 7d
    graph_span: 7d
    hours_12: false
    layout: minimal
    apex_config:
      tooltip:
        enabled: false
      chart:
        offsetY: 10
      yaxis:
        show: false
        min: 65
        max: 90
        tickAmount: 6
      legend:
        show: false
      dataLabels:
        enabled: true
        offsetY: -10
        style:
          fontSize: 10px
        background:
          enabled: true
          opacity: 0
    span:
      end: isoWeek

[kravalli7]

This is what it looks like on the second day of the week (i.e. Tuesdays). Perfectly plotted in 7 equal columns although only 2 are visible since there are no more data points, just like I want it to be on Mondays as well.

[koenigsdorfer]

Hi all,

this may be a randome question, but I have the following code, which works great. Is there a way to only “group” and return the max value for a specific time range. e.g. between the hours of 16:00 to 20:00 each day?

  type: custom:apexcharts-card
  graph_span: 31d
  span:
    start: month
  update_interval: 10m
  cache: true
  all_series_config:
    group_by:
      func: max
      duration: 1d

[nightfever]

Any idea why the forecast’s gradient is so different from the history’s gradient and how to fix that ?
Seems only to happen with type: area.

[vingerha]

You would have to write a js code for that. Likely easier to write a specific helper in HA and use that instead

[tommymsw]

Dumb question I am sure… But how do I add fill color below the line in the graph?

[ValMarDav]

Use area as the chart type.

[kravalli7]

Hey, I’ve seen you rotate the axis labels. Is there also a way to rotate the dataLabels?

[Kertz1954]

Unfortunately no., but you could use the annotations as a last resort.

[DNN]

Thanks for developing such a versatile chart tool. I am trying to make a stacked area graph but for some reason the stacking does not work. When I use type: column I get stacked columns as expected;

type: custom:apexcharts-card
graph_span: 24h
stacked: true
span:
  start: day
update_interval: 1hour
header:
  show: true
  title: Solar energy production
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
series:
  - entity: sensor.zuidoost_solar_lifetime_energy_production
    name: ZuidOost
    type: column
    unit: Wh
    group_by:
      func: delta
      duration: 1h
  - entity: sensor.dakkapel_solar_lifetime_energy_production
    name: Dakkapel
    type: column
    unit: Wh
    group_by:
      func: delta
      duration: 1h
  - entity: sensor.noordwest_solar_lifetime_energy_production
    name: NoordWest
    type: column
    unit: Wh
    group_by:
      func: delta
      duration: 1h

However, when I use type: area they are overlaid and not stacked:

type: custom:apexcharts-card
graph_span: 24h
stacked: true
span:
  start: day
update_interval: 1hour
header:
  show: true
  title: Solar energy production
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
series:
  - entity: sensor.zuidoost_solar_lifetime_energy_production
    name: ZuidOost
    type: area
    unit: Wh
    group_by:
      func: delta
      duration: 1h
  - entity: sensor.dakkapel_solar_lifetime_energy_production
    name: Dakkapel
    type: area
    unit: Wh
    group_by:
      func: delta
      duration: 1h
  - entity: sensor.noordwest_solar_lifetime_energy_production
    name: NoordWest
    type: area
    unit: Wh
    group_by:
      func: delta
      duration: 1h

Does anyone know how I can ensure areas are stacked?
Thanks

[franek62]

Hello,
How to avoid this dome?
Thanks in advance

Bonjour,
Comment éviter ce dôme ?
Par avance, merci

type: custom:apexcharts-card
header:
  title: Consommation des prises (24h)
  show: true
  show_states: true
  colorize_states: true
graph_span: 24h
span:
  start: day
apex_config:
  chart:
    height: 250px
yaxis:
  - id: consommation
    show: true
    min: 0
    decimals: 2
series:
  - entity: sensor.prise_ll_power
    name: Lave Linge
    type: line
    color: "#ff5733"
    stroke_width: 2
    extend_to: now
  - entity: sensor.prise_lv_power
    name: Lave Vaisselle
    type: line
    color: "#33ff57"
    stroke_width: 2
    extend_to: now
  - entity: sensor.prise_sl_power
    name: Séche Linge
    type: line
    color: "#3380ff"
    stroke_width: 2
    extend_to: now
  - entity: sensor.prise_four_power
    name: Four
    type: line
    color: "#ff33a1"
    stroke_width: 2
    extend_to: now
  - entity: sensor.autel_power
    name: Clim
    type: line
    color: "#ffbd33"
    stroke_width: 2
    extend_to: now
  - entity: sensor.shellypmminig3_84fce6397c84_power
    name: Spa
    type: line
    color: "#a133ff"
    stroke_width: 2
    extend_to: now