ApexCharts card - A highly customizable graph card

Hi,
I have a sensor (Beaufort Index Description) that sends text strings instead of numbers.
Is possible to put this sensor as chart title (it vary based on the Beaufort Index)?

1 Like

i had a solution but was not best one. Used input_text but when you enter a wrong value the the whole stats become infected. Would be nice to have a option to select a entity that will only show the value as static point in middle of screen or creates a straight line (then the entity you use remove from recorder/history)

How can I get my Y-axis to correspond to the min max values?

Have tried lots of stuff, but nothing which will auto adjust, Yes, I can set the min/max - but I want it to adjust itself. So I can use this card for every place I have a temp gauge and humidity sensor, i.e outdoor will vary a lot more compared to indoor, so I won’t set a fixed min - max.

Also for the header title, would love to have it in center and with a bigger/bolder font…

Think I have tried almost everything I found on https://apexcharts.com/docs/ :laughing:

image

          - type: 'custom:apexcharts-card'
            header:
              title: Indoor
              show: true
              show_states: true
              colorize_states: true
            update_interval: 10min
            graph_span: 7d
            apex_config:
              tooltip:
                enabled: true
              yaxis:
                - show: true
                  decimalsInFloat: 0   
                  #min: 17
                  #max: 30
                  #range: 20               
                  #min: { return min }
                  #max: { return max }
                  labels:
                    style:
                      colors: '#FFB62E'
                      fontSize: 12px
                      fontWeight: bold
                      fontFamily: Raleway    
                  forceNiceScale: true                   
                - show: true
                  decimalsInFloat: 0
                  opposite: true
                  #range: 20
                  #min: 20
                  #max: 100 
                  labels:
                    style:
                      colors: '#2eb9ff'
                      fontSize: 12px
                      fontWeight: bold
                      fontFamily: Raleway
                  forceNiceScale: true
              xaxis:
                axisBorder:
                  show: false
                labels:
                  style:
                    fontSize: 14px
                    #fontWeight: bold
                    fontFamily: Raleway
              chart:
                height: 'auto'
              grid:
                show: false
                #borderColor: '#404040'
                #strokeDashArray: 3
                #position: back
              legend:
              #  show: false
                fontSize: 12px
                fontFamily: Raleway
                height: 40
              dataLabels:
                enabled: false
              stroke:
                width: 3
                curve: smooth
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0.8
                  inverseColors: false
                  opacityFrom: 0.5
                  opacityTo: 0
                  stops:
                    - [0, 50, 100]              
            series:
              - entity: sensor.netatmo_indoor_temperature
                name: Temperature
                show:
                  extremas: true
                type: area
                color: '#FFB62E'
                fill_raw: last
                float_precision: 0
                group_by:
                  duration: 60min
                  func: avg
              - entity: sensor.netatmo_indoor_humidity
                name: Humidity
                #opacity: 0
                #show:
                #  extremas: true
                type: area
                color: '#2eb9ff'
                fill_raw: last
                float_precision: 0  
                group_by:
                  duration: 60min
                  func: avg    

@John Blance, like this?

1 Like

Hi @hreedijk

Yes, kinda - but with 24 series and only one value from each (the last value)

How did you get the above chart?

Thanks

Officially, you can’t compare data, but I believe that using:

graph_span: 1m
series:
  - entity: xxx
    type: column
    group_by:
      duration: 1m
      func: last

It might work :slight_smile:

My code, just adjust the number of days and add all your sensors to the series

type: 'custom:apexcharts-card'
graph_span: 13d
update_interval: 5m
cache: false
span:
  end: day
  offset: '-1sec'
header:
  show: false
  title: Kosten elektra en gas per dag
apex_config:
  chart:
    type: area
    height: 350
  xaxis:
    labels:
      format: dd-MM
      show: true
      showAlways: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
  yaxis:
    forceNiceScale: false
    decimalsInFloat: 0
  legend:
    show: false
series:
  - color: 'rgb(138,43,226)'
    entity: sensor.energy_total_dagelijks_eur
    type: column
    name: Kosten elektra
    group_by:
      func: last
      duration: 24h
    show:
      datalabels: true
    float_precision: 2
    stroke_width: 1
  - color: 'rgb(235,10,104)'
    entity: sensor.energy_gass_eur
    type: column
    name: Kosten gas
    group_by:
      func: last
      duration: 24h
    show:
      datalabels: true
    float_precision: 2
    stroke_width: 1
  - color: 'rgb(105,226,69)'
    entity: sensor.energy_export_total_dagelijks_eur
    type: column
    name: Opbrengst elektra
    group_by:
      func: last
      duration: 24h
    show:
      datalabels: true
    float_precision: 2
    stroke_width: 1
  - color: 'rgb(128,128,128)'
    entity: sensor.energy_gas_en_elektriciteit_eur
    type: column
    name: Totaal
    group_by:
      func: last
      duration: 24h
    show:
      datalabels: true
    float_precision: 2
    stroke_width: 1

Doesnt seem to quite work - with graph span and duration the same


And mostly works if graph span is larger

Thanks for the response - looks like not quite the intended use of this card

Edit: using 5m instead of 1m as that is the update frequency of the sensors, the result of 1m is the same as the first image

As per response to bacco007 trying to set up some COVID vaccination charts. I was planning to do the same for Finland. Data is no problem, nor plotting it in the graphs per se - bit rather how to set the right labels, as I have not immediately found a way to set the labels - preferably using a generator script in the same way as the data - or at all for that matter… All samples I have seen so far here is for plotting something time based.

Is it possible to give in own labels?

I have a plan to work on that, so bear with me :slight_smile:

@RomRider, I’m getting this strange disruption in my graph. Do you have any idea why?
image

Should be fixed in the latest beta. Please report back.

What do you mean by multi-line legend?

You mean this kind of chart?:
image

If so, no, not yet. Open a feature request with your use case and I’ll see what I can do.

No, that is not a feature of the ApexCharts library unfortunately

You can’t at least not at the moment. Maybe I’ll introduce a feature for that, but ApexCharts is complex and I have to work around a bunch of stuff to make this possible…

You can use card-mod for that.

That is because in your data_generator the first value’s timestamp is where the line starts. You can introduce the value of the other sensor as the first data point if you want to “merge” the end of the first line with the beginning of the second.

I’m not sure what you mean by the “other sensor” ?
I only use one sensor in this automation. Can you be more specific, please ?

Whether it’s the same sensor or another one is not relevant for my answer.
Share you’re config and I’m going to show you how to do it.

Sure, here it is:

type: 'custom:apexcharts-card'
graph_span: 6d
span:
  start: hour
  offset: '-36h'
header:
  show: true
  title: Temperature Forecast
  show_states: true
now:
  show: true
  label: now
apex_config:
  legend:
    show: false
series:
  - entity: weather.home
    name: Temperature
    unit: °C
    attribute: temperature
    fill_raw: last
    extend_to_end: false
    group_by:
      func: avg
      duration: 2h
  - entity: weather.home
    type: line
    extend_to_end: false
    unit: °C
    show:
      in_header: false
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.temperature];
      });

And here’s the attribute list of my sensor:

temperature: 4.8
humidity: 76
pressure: 1005.2
wind_bearing: 316.9
wind_speed: 4
attribution: >-
  Weather forecast from met.no, delivered by the Norwegian Meteorological
  Institute.
forecast:
  - condition: partlycloudy
    precipitation: 0
    precipitation_probability: 0
    temperature: 6.2
    templow: -1.3
    datetime: '2021-03-21T11:00:00+00:00'
    wind_bearing: 334.4
    wind_speed: 20.5
  - condition: cloudy
    precipitation: 0
    precipitation_probability: 0
    temperature: 9.6
    templow: -1.4
    datetime: '2021-03-22T11:00:00+00:00'
    wind_bearing: 194.9
    wind_speed: 5.4
  - condition: partlycloudy
    precipitation: 0
    precipitation_probability: 5.9
    temperature: 9.7
    templow: 0.1
    datetime: '2021-03-23T11:00:00+00:00'
    wind_bearing: 219.7
    wind_speed: 11.2
  - condition: partlycloudy
    precipitation: 0
    precipitation_probability: 11.8
    temperature: 9.5
    templow: 3.3
    datetime: '2021-03-24T11:00:00+00:00'
    wind_bearing: 211
    wind_speed: 16.9
  - condition: partlycloudy
    precipitation: 0
    precipitation_probability: 11.8
    temperature: 9.3
    templow: 1.9
    datetime: '2021-03-25T11:00:00+00:00'
    wind_bearing: 219.9
    wind_speed: 12.6
friendly_name: Home

How can i make a graph with sum per hour ?
The calcluated value per hour is different compared to to sum of data from dat sensor in my DB.
Looks like i’m having trouble again with sensordata that stays the same for minutes.

Here is an example.

the hour graph (second graph) calculated 10w betwenn 23:00 and 00:00.
The minute graph ( first graph) shows the sum between 23:00 and 00:00 should be higer than 10 w. Looks like it’s only adding the value if it different from the previous value.

The code of the second grap ( sum per hour) is:

type: 'custom:apexcharts-card'
graph_span: 24h
locale: nl
span:
  end: day
cache: false
header:
  show: true
  show_states: true
all_series_config:
  type: column
  group_by:
    func: sum
    duration: 1h
    fill: last
series:
  - entity: sensor.energy_power
    name: power
    color: red
    fill_raw: last
  - entity: sensor.energy_solar
    name: solar
    color: green
    fill_raw: last
  - entity: sensor.water_meter
    name: water
    color: blue
    fill_raw: last

Is my code correct if i want the sum per hour for this day ?
Did i make another fu in the group_by part ?

group_by only works if there is enough state change to fill each bucket (= 1 column of length duration). If there isn’t enough state change by default, it will reuse the data from the previous bucket (with fill: last)

I don’t see anything wrong with the data shown on both chart. If you change to fill: zero on the first chart, you’ll understand what i mean.

Also your first chart is not showing from 23 to midnight it’s displaying data from 22.20 to 23.20. Between 23.00 and 23.20 on the first chart, there seem to be 3 states change (3 + 4 + 3 which sums up to 10 as the second chart is showing)

The power sensor updates every 60 secondes and it is possible to have the same value for a few minutes of power usage in the house. ( it counts pulses on an kwh meter)

The correct sum of power usage per hour should be something like this example

23:00 -> 3w
23:01 -> 3w
23:02 -> 4w
23:03 -> 3w
23:04 -> 3w

Sum should read 16w during this hour column (3+3+4+3+3)

The group by hour give me 3+4+3 = 10w for the hour column.

I would like to have the unchanged value also added to the sum when it does’nt change. It means the power consumption that minute was 3 pulses the same as the minute before.

For example if in theory the power consumption is 3 pulses /minute for an hour without changing the sum would be 60x3 = 180. The group_by would saysum is 3w for those 60 entry’s of 3w

Seems like the history API of home assistant is not reporting consecutive state change with the same value. I’ll need to investigate… Is it even stored in HA’s database?

I think I know the problem… In the API significant_change_only defaults to true… But it’s not documented :man_shrugging:

See here

I’ll fix it.

1 Like