ApexCharts card - A highly customizable graph card

My language is French and I don’t use the locale: parameter and my graphics use French.

Alright, so maybe something with my setup or the se locale. Maybe another Swedish user can give feedback :slight_smile:

I’m having a problem with graphs that refer to sensors that haven’t updated since the previous day but don’t span that far. It leave gaps on the graph until the first change of the day. Is there a way to fetch the last piece of data to display until that first change of value please?

Screenshot 2023-05-03 095804

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
header:
  title: Water Heater Input (kWh)
  show: true
  show_states: false
series:
  - entity: sensor.hot_water_kw_helper
    type: area
    transform: return x / 1000;
    color: '#3757cc'
    opacity: 0.2
    group_by:
      func: avg
      duration: 10min
    stroke_width: 2
    extend_to: now
yaxis:
  - decimals: 1
    apex_config:
      tickAmount: 3
    min: 0
    max: '|+0.1|'
apex_config:
  legend:
    show: false
  chart:
    height: 200px
  grid:
    show: true
    borderColor: '#404040'
    strokeDashArray: 1
    position: back
  tooltip:
    enabled: false

Can i change the Text Position of the Total somewhere?
I want it a little bit higher

There is no way to style the extremes (min/max) like the labels, right? Not even with config-template-card?

Hello All love this card @RomRider . When using a pie chart is there a way to have the color of just one slice of the pie change based on it’s reading? I tried the below config but it does nothing. TIA for any help.

type: custom:apexcharts-card
chart_type: pie
header:
  show: true
  show_states: true
  colorize_states: true
  title: WB Soil Sensor
series:
  - entity: sensor.soilsensor_soil_moisture
    name: Moisture
    color_threshold:
      - value: 0
        color: red
      - value: 30
        color: yellow
      - value: 40
        color: green
  - entity: sensor.soilsensor_battery
    name: Battery
  - entity: sensor.soilsensor_temperature
    name: Temp
    type: column
  - entity: sensor.soilsensor_linkquality
    name: Link Quality
    type: column
 

Hi, nice job,…curious, what HWsensor do you use to read out those water parameters?

Is there a way we can hide the x-axis?
I tried the following but not luck:

apex_config:
  legend:
    show: false
  xaxis:
    lables:
      show: false
    axisBorder:
      show: false
    axisTicks:
      show: false
    crosshairs:
      show: false
    tooltip:
      enabled: false

Edit: If I look at this it should be working…

1 Like

? where do you see that option ?

xaxis:
   show: false

It doesn’t exist, my bad. Only yaxis has it. Removed. Problem exists still. So is there a way to remove x-axis?

Hi,
I have a problem regarding the rendering of colums in a line chart. My goal is to have two series, one shown as a line (data coming from historical sensor data) the other one as column (data coming from a data_generator). These columns should be rendered with a 25% opacity. Therefore I set the stroke_witdh to 0 and the opacity to 0.25.
This seems to work fine, as to be seen in this example, with random data generated by a data_generator, for both series.

type: custom:apexcharts-card
header:
  show: false
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
series:
  - entity: sensor.forecast_solar_gesamt_tagesproduktion_heute
    stroke_width: 0
    opacity: 0.25
    type: column
    show:
      legend_value: false
      in_header: false
      name_in_header: true
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 48; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
      }
      return data.reverse();
  - entity: sensor.temperatur_aussen_strasse_temperature
    stroke_width: 2
    opacity: 0.75
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 48; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
      }
      return data.reverse();

grafik

But as soon as I remove the data_generator from the second series (the line , not the columns itself!) so it uses the historical sensor data, the colums become very slim lines.

type: custom:apexcharts-card
header:
  show: false
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
series:
  - entity: sensor.forecast_solar_gesamt_tagesproduktion_heute
    stroke_width: 0
    opacity: 0.25
    type: column
    show:
      legend_value: false
      in_header: false
      name_in_header: true
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 48; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 20) + 1)])
      }
      return data.reverse();
  - entity: sensor.temperatur_aussen_strasse_temperature
    stroke_width: 2
    opacity: 0.75

grafik

I tried setting the stroke_width to a value greater than zero to thicken the colums, but the result is bad in two ways: First, the opacity is ignored by the outline and second, the width is ‘fixed’ so does not change on different display sizes.

Has anyone else encountered this problem? Any idea how to fix or circumvent this issue?
Thanks in advance.

There is if you can spell labels correctly !! :grinning:

Is there a way to have a “dynamic” graph_span?

When chargin my car this graph is shown (conditional card). When it has been chargin overnight the 12 hour span makes sense but if I only charge for 3 hours it looks a bit weird. Any ideas?

image

Hi, i notice a strange behaviour across multiple devices in the graph. I have a monthly aggregated view an started recording data in march 2023.

Looking at my desktop-pc in chrome it looks as foolows:
Screenshot 2023-05-08 114850

In homeassistant-app on my iphone the first month is missing.

In a browser (chrome) on a third device partial data is missing:
Screenshot 2023-05-08 113705

I think there is a rendering issue because of the data exists in homeassistant-db. I have similar graphs aggregating on a weekly base - the data of march is missing also. Therefore i dont think it relates to the span-periods 6month etc.
I noticed the difference in x-axis-values which leads me to the formatting code. Removing the code did not change anything in displaying march-data.

Does anybody noticed a similar issue?

Best regards,
chrclaus

My configuration is:

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
  tooltip:
    enabled: true
    theme: light
    style:
      fontsize: 6px
    onDatasetHover:
      highlightDataSeries: true
    x:
      show: false
      format: MMM yyyy
      formatter: |
        EVAL:function(value) {
          const array_list = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']      
          const unixts = value;
          var date = new Date(unixts);
          date.setDate(date.getDate() + 2);
          var syear = date.getFullYear();
          var result = array_list[date.getMonth()] + ' ' + syear;
          return result;
        }      
    marker:
      show: true
    fixed:
      enabled: false
      position: topRight
      offsetX: -10
      offsetY: 0
update_interval: 1d
graph_span: 6month
span:
  end: month
show:
  last_updated: true
header:
  show: true
  title: Energie-Übersicht (Monat)
  show_states: true
  colorize_states: true
series:
  - entity: sensor.energy_e3dc_wallbox
    type: column
    name: Wallbox
    color: grey
    group_by:
      func: delta
      duration: 1month
      fill: zero
  - entity: sensor.energy_grid_feed_in
    type: column
    name: Netzeinspeisung
    color: rgb(0, 164, 206)
    group_by:
      func: delta
      duration: 1month
      fill: zero
  - entity: sensor.energy_grid_usage
    type: column
    name: Netzbezug
    color: red
    group_by:
      func: delta
      duration: 1month
      fill: zero
  - entity: sensor.scb_energy_yield_total
    type: column
    name: Solar (Carport)
    color: '#FB9900'
    group_by:
      func: delta
      duration: 1month
      fill: zero
  - entity: sensor.energy_solar_production
    type: column
    name: Solar (Haus)
    color: '#F7E900'
    group_by:
      func: delta
      duration: 1month
      fill: zero

1 Like

Same “problem” here, but in other places in HA “sv-SE” is used. I don’t know if that is affecting the behavior in APEX since this is system-wide and “se” is not?

Hide it :wink:

Alright, thanks for sharing!

Hello, I would like to display the graph with monthly values over 12 months. I get minutes. How to please?

type: custom:apexcharts-card
header:
  show: true
  title: Achat et vente d'électricité sur 12 mois
graph_span: 12M
apex_config:
  chart:
    type: area
    height: 400
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 50
        - 100
series:
  - color: rgb(108,218,231)
    entity: sensor.total_energy_mensuel
    name: Achat d'électricité
    float_precision: 2
    type: column
    group_by:
      func: sum
      duration: 1M
    show:
      datalabels: true
  - color: rgb(163,229,113)
    entity: sensor.vente_surplus_mois
    name: Vente d'électricité
    float_precision: 2
    type: column
    group_by:
      func: sum
      duration: 1M
    show:
      datalabels: true

for as far as I know, grouping by month is not (yet?) supported

Tried the same and ended up grouping by 30 days which isn’t optimal.