ApexCharts card - A highly customizable graph card

formicro · March 23, 2021, 12:09am

In reference to Frank question there :
https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/296?u=formicro

  - type: 'custom:apexcharts-card'
    graph_span: 24h
    cache: true
    span:
      start: day
    chart_type: donut
    apex_config:
      plotOptions:
        pie:
          donut:
            total:
              show: true
              showAlways: true
              formatter: null

Is it possible to display a sensor value, right in the center of a donut ?
Thanks for suggestions, regards, Thomas.

lless · March 23, 2021, 6:02am

Now, i have 2 elements with current value: legend and header. Header looks better, but him not have function hide series. I try hide header and up legend, but him looks bad. How i may add click function to header or make a legend view like header

markcocker · March 23, 2021, 3:54pm

The line can be removed by setting stroke_width=0

For example for a binary sensor:

  - entity: binary_sensor.night
    name: Night time
    curve: stepline
    opacity: 0.2
    stroke_width: 0
    show:
      in_header: false
    transform: 'return x === ''on'' ? 1 : 0;'

markcocker · March 23, 2021, 4:17pm

Is there a mechanism to create an axis annotation at a timestamp contained in a sensor? From what I’ve read above Jinja templates are not supported.

In my case X axis annotations for sunrise and sunset, eg:

apex_config:
  annotations:
    xaxis:
      - x: states.sensor.sunrise
        label:
          text: Sunrise

RomRider · March 23, 2021, 8:09pm

You can use config-template-card to build that for now

markcocker · March 24, 2021, 9:59am

Thanks for the hint. Works great…

Card config

type: 'custom:config-template-card'
entities:
  - sensor.sunrise
  - sensor.sunset
  - sensor.zappi_generation
  - sensor.harvi
card:
  type: 'custom:apexcharts-card'
  header:
    show: true
    show_states: true
    colorize_states: true
    title: Solar generation
  span:
    start: day
  graph_span: 24h
  all_series_config:
    stroke_width: 2
    type: area
    extend_to_end: false
    float_precision: 0
  color_list:
    - yellow
    - yellow
    - green
    - grey
  series:
    - entity: sensor.zappi_generation
      name: Solar on house
      group_by:
        func: avg
        duration: 20min
    - entity: sensor.zappi_generation
      name: Solar on house
      offset: '-24h'
      type: line
      opacity: 0.2
      group_by:
        func: avg
        duration: 20min
      show:
        in_header: false
    - entity: sensor.harvi
      name: Solar on shed
      group_by:
        func: avg
        duration: 20min
  y_axis_precision: 0
  apex_config:
    annotations:
      xaxis:
        - x: '${new Date(states[''sensor.sunrise''].state).getTime()}'
          label:
            text: ☼
            borderWidth: 0
            style:
              background: '#0000'
        - x: '${new Date(states[''sensor.sunset''].state).getTime()}'
          label:
            text: ☾
            borderWidth: 0
            style:
              background: '#0000'
    yaxis:
      - seriesName: Solar on house
        decimalsInFloat: 0
      - seriesName: Solar on house
        show: false
      - seriesName: Solar on shed
        show: false
      - seriesName: Night time
        opposite: true
        show: false
    tooltip:
      x:
        format: 'ddd dd MMM - HH:mm'
    xaxis:
      tooltip:
        enabled: false
    legend:
      show: false
    grid:
      borderColor: '#7B7B7B'
    chart:
      foreColor: '#7B7B7B'
      zoom:
        type: x
        enabled: true
        autoScaleYaxis: true
      toolbar:
        show: true
        autoSelected: zoom
        tools:
          zoom: true
          zoomin: false
          zoomout: false
          pan: false
          reset: true

RomRider · March 24, 2021, 11:16am

Love it

eric.xls · March 26, 2021, 1:24am

Any ideas why the x - axis hides the dates with a column graph? …changing the graph to line type seems to kind of work, but still it is not displaying all the 7 days.

DavidFW1960 · March 26, 2021, 8:06am

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…

gerard33 · March 26, 2021, 2:13pm

@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.

skank · March 26, 2021, 5:05pm

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

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

wrugaian · March 26, 2021, 7:29pm

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.

wrugaian · March 26, 2021, 7:51pm

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…

Airyphyla · March 26, 2021, 8:11pm

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```

jlich · March 26, 2021, 11:12pm

@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.

DavidFW1960 · March 26, 2021, 11:40pm

@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.

bacco007 · March 27, 2021, 5:25am

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.

bacco007 · March 27, 2021, 5:26am

tried setting decimalsInFloat to 0?

DavidFW1960 · March 27, 2021, 5:50am

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

mirekmal · March 27, 2021, 8:42am

@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.