ApexCharts card - A highly customizable graph card

I have installed grafana and have been able to graph the solar output data as I want it, however I don’t want to use grafana, but still can not get the data to display in home assistant using apex charts.

For the daily solar production the query is:

SELECT mean("value") FROM "solar" WHERE ("entity_id" = 'day') AND $timeFilter GROUP BY time($__interval) fill(none)

for monthly solar production.

SELECT mean("value") FROM "solar" WHERE ("entity_id" = 'month') AND $timeFilter GROUP BY time($__interval) fill(none)

Does anyone know how I can get it to display in home assistant using apex charts?

thanks

You can’t because the data from the future doesn’t exist in homeassistant.

You have to create sensors out of influxdb queries: InfluxDB - Home Assistant

1 Like

@RomRider - Hi, Yes I am doing the sensor for influx as below… However as stated earlier it is only returning the sum of all the influx data.

How do I get it to graph each months values ?
I have re-read the influxdb info many times, and can not figure it out. I have also searched the HA forums and googled, and can not find a solution. What info I do find is to do with using grafana and node red, which I dont want to use. I want to keep it as simple as possible, and use apex charts which I really like.
Thanks

Hello everyone,

I really loce the card and use it throughout my lovelace. My power and gas consumption is done and now I am trying to show sleep data. I have a sensor that changes text (light_sleep, deep_sleep) to numbers (3, 4), so apexchart can make sense of it.

What I want is to name the labels in the y-axis to with the corresponding name. I looked up the apex guides, but when I try to use label formatter the card wont work. Any suggestions?

1 Like

Hi all, is there already a way to also show distributed columns (no time series, e.g. link). My potential use case would be to show all room temperatures and valve status at a glance?

Thanks in advance

You’ll need to use the latest beta and the new EVAL feature. The documentation for that is in the dev branch on github.

That’s not yet possible but I have plans to make it possible in the future. Just didn’t find time to do so yet :blush:

1 Like

Hi there , is it possible to make a graph like this example with the HA plugin:

apexcharts basic example

Where you have months on the xaxis ?

Thanks Romrider! Got it working!
FYI, the chart works on my phone (app and Chrome), but not on my computer on Chrome. Edge does work.

1 Like

That seems like a caching issue, check the JS console it will give you the version you are running

BTW, what is the integration which gives you this level of sleep detail?

Ah, that could be it. Ill try that tommorow.
I’m using “Sleep as Android”. It can post events (e.g. deep_sleep) to http, which I store in a variabele.

1 Like

First up big ups for making this RomRider, its another amazing part of HA imo.

Second, was wondering if it was possible to either transform my ping data to cap at 100ms or to force a scale for the graph so the speeds look scaled correctly. I’m kinda interested in something to transform that says anything over 100 = 100

Thanks!

1 Like

Why not use multiple y-axis? There are lots of examples in this thread :blush:

Edit: also see below, what’s incoming :slight_smile:

Native multi-y axis with auto-scaling support incoming :eyes:

This means, no need to define min and max anymore with multiple y-axis :slight_smile: and also a better UX (no need to define as much y-axis as the number of series).

Hopefully this will make it easier for everyone :slight_smile:

2 Likes

:tada: :tada: New Release :tada: :tada:

1.9.0 (2021-05-24)

Information

  • The long awaited native multi-y axis support is finally there :tada: You can now have as many y-axis as there are series defined in your configuration, or less and it supports auto-scaling :tada: So you can now easily group some series together on an y-axis, and some other on other y-axis.

    min and max support multiple types of format:

    • not set or auto (this is the default): if it is set to auto, the min or max will be automatically calculated
    • any number: if a number is set, the min or max will be fixed on the y-axis
    • ~90: if the format is ~ followed by a number, the min or max will be defined as a soft bounds
      • min: ~90 and the min of the data in the series is 120: the y-axis min value will be 90
      • min: ~90 and the min of the data in the series is 60: the y-axis min value will be 60
    • '|+20|' or '|-20|': This will add/remove the value between | | from the min/max
      • min: '|-20|': The min of the data in the series is 32, the y-axis min will be 12 (= 32 - 20)
      • max: '|+10|': The max of the data in the series is 32, the y-axis max will be 42 (= 32 + 10)

    Example:

    type: custom:apexcharts-card
    graph_span: 20min
    yaxis:
      - id: first # identification name of the first y-axis
        apex_config:
          tickAmount: 4
      - id: second # identification name of the second y-axis
        opposite: true # make it show on the right side
        apex_config:
          tickAmount: 4
    all_series_config:
      stroke_width: 2
    series:
      - entity: sensor.random0_100
        yaxis_id: first # this serie will be associated to the 'id: first' axis.
      - entity: sensor.random_0_1000
        yaxis_id: second # this serie will be associated to the 'id: second' axis.
      - entity: sensor.random0_100
        yaxis_id: first # this serie will be associated to the 'id: first' axis.
        transform: 'return Number(x) + 30;' # We make it go fom 30 to 130
      - entity: sensor.random0_100
        yaxis_id: first # this serie will be associated to the 'id: first' axis.
        transform: 'return Number(x) - 30;' # We make it go from -30 to 70
    

Features

  • make datagenerator async (#157) (b9049fc)
  • Native multi y-axis support with auto-scale (#160) (e08aa14), closes #158
  • soft bounds and extended bounds for yaxis min/max (#161) (c57278b)
  • apex_config: Support for functions in apex_config (cebc03b), closes #81

Bug Fixes

  • always get all state changes, not only significant ones (3b2f9c8)
  • graph might be wrong when using attributes if value was 0 (e200323)
  • Support for custom views config parameters (view_layout) (76a8023)
  • yaxis would always start at 0 (50ef9e4), closes #158
  • group_by: group_by reporting erronerous values for the first bucket of data (8303b84), closes #110
  • group_by: When group_by was used with lines, the end of the chart was showing an empty slot (display bug only) (0163f9e)
5 Likes

Hi @RomRider , is it possible to make a graph like this example with the HA plugin:

apexcharts basic example

Where you have months on the xaxis ?

Love that soft bounds are here! :smiley: But I can’t get it to work with max.

This is what I’m trying to do. Electricity price is 99% of the days between 1-100 cents, but a few days per year it can be 200 cents. I want the y-axis to go from 0-100 since that gives me a good udnerstanding of the electricity price by just glancing at it. But the rare days when it’s higher than 100 cents I want the y-axis to reflect that.

Is that what should be doable here?

  yaxis:
    min: 0
    max: ~100

It should but I think there’s a bug in what I did :blush: let me check! I didn’t test “fixed” + “soft” :sweat_smile:

But the format is not correct in your config btw (yaxis is an array and requires an id, even for 1 axis only. I’ll improve it later)

1 Like

latest beta (1.10.0-dev.1) should fix the issue:

series:
  - entity: x.y
    # yaxis_id: whatever # not needed anymore if you have only 1 yaxis
yaxis:
  - # id: whatever # not needed anymore if you have only 1 yaxis
    min: 0
    max: ~100
1 Like

Not getting it to work… But it is usually me that is the problem :laughing: Do you see anything obvious? When trying the same for a graph of the electricity price I also get the Y scale from 0 to 5.

Without max: ~10000

With max: ~10000

apex_config:
  tooltip:
    enabled: false
  annotations:
    position: back
    yaxis:
      - 'y': 10000
        strokeDashArray: 5
        borderColor: '#962626'
        borderWidth: 1
  yaxis:
    - # id
      min: 0
      max: ~10000
      forceNiceScale: true
      decimalsInFloat: 0

yaxis is not in apex_config, it should be in the main part of the config as stated in the documentation :wink:

apex_config:
  tooltip:
    enabled: false
  annotations:
    position: back
    yaxis:
      - 'y': 10000
        strokeDashArray: 5
        borderColor: '#962626'
        borderWidth: 1
yaxis:
  - min: 0
    max: ~10000
    apex_config:
      forceNiceScale: true
      decimalsInFloat: 0