ApexCharts card - A highly customizable graph card

So the Y-axis is showing fractions when the only possible result is a whole number… can I make it only show whole numbers (seconds here)? Only just happened…

@markcocker That looks great. Can you show me how you made sensor.sunrise and sensor.sunset?
I tried it with the sun.sun atrributes directly but that’s not working.

Yeah using 1.9.0.dev1 it looks good again :slight_smile:
thank you!

However my history is gone from february i think, will look into it

Hi all. I’m lost with y-axis configuration.


I’d like to have Temperature IN (blue) and Temperature OUT (red) on the same y-axis, but sun.elevation (gray) and sun.sun (area) obviously not.
I don’t know why, but despite my code I have always 4 different axes:

- type: 'custom:apexcharts-card'
  graph_span: 1w
  all_series_config:
    color: '#ff8c00'
    stroke_width: 2
    fill_raw: last
    show:
      in_header: true
      legend_value: false
      extremas: true
  header:
    show: true
    show_states: true
    title: Temperatura 1w
  apex_config:
    legend:
      show: false
    yaxis:
      - seriesname: IN
        title:
          text: Temperatura
        decimalsInFloat: 1
        forceNiceScale: true
      - seriesname: elevazione
        show: false
  series:
    - entity: sensor.T_IN
      name: IN
      color: BLUE
    - entity: sensor.T_OUT
      name: OUT
      color: RED
    - entity: sensor.sun_elevation
      name: elevazione
      color: gray
      show:
        in_header: false
        extremas: false
      stroke_width: 1
    - entity: sun.sun
      type: area
      transform: 'return x === ''above_horizon'' ? 100 : 0;'
      curve: stepline
      show:
        in_header: false
        extremas: false
      stroke_width: 0
      opacity: 0.05

I think there is a bug, anyway, because if I change my code:

- seriesname: 'IN'
  title:
    text: Temperatura
  decimalsInFloat: 1
  forceNiceScale: true
- seriesname: 'elevazione'
  title:
    text: elev
  #show: false

I have this result:

despite the seriesname the y-axis takes the second entity in the bottom list to create the axis itself. If I change the order of the bottom entities, also the axis changes.

Can you help me to understand if I am wrong? Is there a way to force 2 graphs on the same y-axis?
Thank you.

I solved… seriesName and I understood that I have to create a seriesName=IN also for OUT, putting in 2nd position:

yaxis:
  - seriesName: IN
    title:
      text: Temperatura
    decimalsInFloat: 1
    forceNiceScale: true
  - seriesName: IN
    show: false
    forceNiceScale: true
  - seriesName: elevazione
    show: false

Maybe can help someone else…

i have this code, and i would like to calculate the weekly, and daily increase of corona infections. Can someone help me out?

type: 'custom:vertical-stack-in-card'
cards:
  - type: 'custom:mini-graph-card'
    animate: true
    entities:
      - entity: sensor.netherlands_coronavirus_confirmed
        index: 0
    font_size_header: 16
    hours_to_show: 192
    points_per_hour: 0.1
    line_color: red
    icon: 'mdi:virus'
    name: COVID-19 Netherlands (1w)
    show:
      extrema: true
      icon: true
  - type: entities
    show_header_toggle: false
    entities:
      - entity: sensor.netherlands_coronavirus_confirmed
        icon: 'mdi:account-switch'
        name: Confirmed
      - entity: sensor.netherlands_coronavirus_recovered
        icon: 'mdi:pill'
        name: Recovered
      - entity: sensor.netherlands_coronavirus_deaths
        icon: 'mdi:skull'
        name: Deaths```

@bacco007 is this still working for you (Amber Forecasting)? Mine has stopped forecasting as of yesterday. My Amber forecasting sensor appears to have not changed as I am using the data elsewhere.

@RomRider Any ideas? I have tried y_axis_precision and the float_precision in the series as well but I still get decimals in the y axis.

I’ve found its a bit flakey, reporting shorter time periods and sometimes reporting nothing - but this seems to be consistent with what the sensor is reporting, so I’m not sure what’s going on there.

tried setting decimalsInFloat to 0?

No I haven’t… will try.

OK tried in 3 places and just get a red screen in 2 and under apex_config it is either being ignored or no effect

Also tried:

yaxis:
  decimalsInFloat: 0

Under apex_charts… nothing

@DavidFW1960 here is the code that works for me to eliminate decimals:

    apex_config:
      yaxis:
        forceNiceScale: true
        decimalsInFloat: 0

But please note that there are other functions that might prohibit this from working properly:

forceNiceScale: Boolean

If set to true , the y-axis scales are forced to generate nice looking rounded numbers even when min/max are provided. Turn this off if you manually set min/max and want it to be unchanged.

decimalsInFloat: Number

Number of fractions to display when there are floating values in y-axis.
Note : If you have defined a custom formatter function in yaxis.labels.formatter , this won’t have any effect.

1 Like

Hi @gerard33,

I checked it out.
He is using: https://github.com/pnbruckner/ha-sun2

1 Like

The Sun2 integration installed via HACS > Custom repository, then add GitHub - pnbruckner/ha-sun2: Home Assistant Sun2 Sensor then added the following to configuration.yaml and restarted HA.

  # Sun2
  # https://github.com/pnbruckner/ha-sun2
  - platform: sun2
    monitored_conditions:
      - sunrise
      - sunset
1 Like

Thanks. Can you share the state of one of these sensors? Then i can try to make a template sensor for it instead of installing the custom integration (bit of an overkill for only this graph).

Hello everybody,

how can I show the exact time of the solar pump (binary_sensor) when it goes on and off.
At the moment I only found out over certain time intervals.
However, these are not identical to the switch-on and switch-off times of the pump.

Is there a way to solve this?

I absolutely need the group_by options.

type: 'custom:apexcharts-card'
header:
  title: Verhalten Solarladepumpe
  show: true
  show_states: true
  colorize_states: true
update_interval: 10min
graph_span: 24h
span:
  end: hour
apex_config:
  tooltip:
    enabled: true
  yaxis:
    - show: true
      decimalsInFloat: 0
      labels:
        style:
          colors: '#bd9b35'
          fontSize: 12px
          fontWeight: bold
          fontFamily: null
      forceNiceScale: true
    - show: true
      decimalsInFloat: 0
      opposite: true
      labels:
        style:
          colors: '#bf5e5e'
          fontSize: 12px
          fontWeight: bold
          fontFamily: null
      forceNiceScale: true
    - show: true
      decimalsInFloat: 0
      opposite: true
      labels:
        style:
          colors: '#428bca'
          fontSize: 12px
          fontWeight: bold
          fontFamily: null
      forceNiceScale: true
  xaxis:
    axisBorder:
      show: false
    labels:
      style:
        fontSize: 14px
        fontFamily: null
  chart:
    height: auto
  grid:
    show: false
  legend:
    fontSize: 12px
    fontFamily: null
    height: 40
  dataLabels:
    enabled: false
  stroke:
    width: 2
    curve: smooth
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0.8
      inverseColors: false
      opacityFrom: 0.5
      opacityTo: 0
      stops:
        - - 0
          - 50
          - 100
series:
  - entity: luxtronik.id_web_temperatur_tss
    name: Solarspeicher
    unit: C°
    show:
      extremas: true
    type: area
    color: '#bd9b35'
    fill_raw: last
    float_precision: 0
    group_by:
      duration: 1min
      func: avg
  - entity: luxtronik.id_web_temperatur_tsk
    name: Kollektor
    unit: C°
    type: area
    color: '#bf5e5e'
    fill_raw: last
    float_precision: 0
    show:
      extremas: true
    group_by:
      duration: 1min
      func: avg
  - entity: binary_sensor.solar_pumpe
    transform: 'return x === ''on'' ? 1 : 0;'
    name: Pumpe
    type: area
    color: '#428bca'
    fill_raw: last
    float_precision: 0
    show:
      extremas: false
    group_by:
      duration: 1min
      func: avg

image

group_by means it groups by time interval so you can’t keep the precision because that’s exactly the goal of group_by :man_shrugging: . But you can remove group_by from just the binary_sensor. You can also use curve: stepline to make it a staircase-like line in the binary_sensor series (which is probably what you you are trying to simulate using group_by :wink:)

Both sensor.sunrise and sensor.sunset are timestamps…

I have an issue with the x-axis time. It appears to be one hour behind both my HA history graphs and my Grafana graphs. My TZ is Stockholm/Brussels and it’s working for all other parts of HA.

ApexCharts has the data for the current hour, it just displays it as one hour to early (e.g., 19:00 becomes 18:00 in the chart).

Is this a setting I’ve missed?

That should be only today because of the daylight saving time change.