ApexCharts card - A highly customizable graph card

Great, thank you @ThoStaKa :+1:

I think I found it. I changed

group_by:
  func: max

to

group_by:
  func: last

This seems to work for now. I’ll keep an eye on it for the next few days.

Thank you @RomRider for information. I’ve installed the last beta but I can’t figure out, how to use the in_header option.
Can you give some examples?

Hi
Need some help to create a tide forecast. I have a lot of nice ApexCharts with historical data, but struggeling with the datagenerator and future plots. I have this sensor from where I want a nice graph for the upcoming tide water, look at the attributes “flag”:

Also I have created template sensors:

Anyone?

Like so:

series:
  - entity: sensor.your_sensor
    show:
      in_header: after_now
    data_generator: ...

Something like this would work:

series:
  - entity: sensor.tide_59_41438_xxxx
    data_generator: |
      return entity.attributes.water_levels.map((level) => {
        return [new Date(level.time).getTime(), level.value];
      });
1 Like

Using the weather integration from https://community.home-assistant.io/t/deutscher-wetterdienst-dwd/217488

Until now I used a modification of https://community.home-assistant.io/t/deutscher-wetterdienst-dwd/217488/42 to display the irradiation and sun duration forecast for my region, but the ApexCharts Card is a lot better!

It is a >500 line forecast state, I cut away the middle:

data:
  - datetime: '2021-03-03T16:00:00.000Z'
    value: 640
  - datetime: '2021-03-03T17:00:00.000Z'
    value: 190
  - datetime: '2021-03-03T18:00:00.000Z'
    value: 0
  - datetime: '2021-03-03T19:00:00.000Z'
    value: 0
 
[cut]

  - datetime: '2021-03-13T19:00:00.000Z'
    value: 0
  - datetime: '2021-03-13T20:00:00.000Z'
    value: 0
  - datetime: '2021-03-13T21:00:00.000Z'
    value: 0
  - datetime: '2021-03-13T22:00:00.000Z'
    value: 0
forecast_time_utc: '2021-03-03T15:00:00+00:00'
latest_update_utc: '2021-03-03T18:36:27.001888+00:00'
station_id: H247
station_name: LUEDINGHAUSEN-BROCH.
attribution: Data provided by Deutscher Wetterdienst (DWD)
unit_of_measurement: kJ/m^2
friendly_name: Sun Irradiance Luedinghausen-Broch.
icon: 'mdi:weather-sunny-alert'

Recreated the sensor (disregard the name change)

Brilliant RomRider. Thank you so much :slight_smile:
I have a feeling you start to deserve some coffee or beer from the community, I would like to buy you some atleast - so get that link up man :wink:

I installed the integration to test:
image

Config:

          - type: custom:apexcharts-card
            header:
              show: true
              title: Irradiance
              show_states: true
              colorize_states: true
            graph_span: 7d
            span:
              start: hour
            series:
              - entity: sensor.sun_irradiance_luedinghausen_broch
                data_generator: |
                  return entity.attributes.data.map(
                  (item) => {
                    return [new Date(item.datetime).getTime(), item.value];
                  });

The recorder is probably not enabled for your entity and that is why it probably doesn’t work. The card only works for recorder-enabled entities (I could probably fix that for data_generator, but for now that’s how it is :slight_smile: )

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

1.8.0 (2021-03-03)

Hightlights

  • in_header: before_now/in_header: after_now: While using data_generator, display the current value at the current time

  • hours_12 is back from the dead, with a slight modification in its behaviour (unset = HA locale, set to true/false to force a behaviour)

  • Introduce the experimental support for a brush (check the documenation for more details):

    image

    type: custom:apexcharts-card
    experimental:
      brush: true
    graph_span: 2h
    brush:
      selection_span: 10m
    series:
      - entity: sensor.random0_100
        color: blue
        stroke_width: 1
        float_precision: 0
        show:
          in_brush: true
    
  • Some more options in series.show: name_in_header and offset_in_name

Features

  • brush: Support for a timeframe selection chart (#102) (c8dedf7)
  • extremas: Display the time on top of your extremas (#97) (d127b37)
  • group_by: With start_with_last, each bucket will start with the last data from the previous bucket (8669411)
  • header: Standard header title home-assistant format using standard_format (35c5391), closes #35
  • series.show: Display the value before/after the current time in the header (2855403), closes #86
  • series.show: Hide the name of a serie in the header (b20133d), closes #111
  • series.show: Hide the offset from the name of the serie (a46c3f0), closes #112
  • span: Add support for isoWeek (7abc750), closes #106
  • Bring back hours_12 from the dead (676bdb7)

Bug Fixes

  • group_by would sometimes not work with data_generator (cfa6871)
  • header units for radialBar (6883a8f), closes #105
  • start_with_last: start_with_last would sometimes throw (f5aa2e3)
  • bug introduced by 591add (b9c9297)
  • Display non inverted numbers in legend/tooltip/datalabels when invert: true (331fe04), closes #96
  • extremas was not working with invert: true (4d06ef6), closes #96
  • Optimize extend_to_end when used with group_by (591add8)
  • Support for card-mod >= 3.0 (8348119), closes #104
  • extremas: Multi y-axis support (#98) (5c7d742), closes #89
5 Likes

So here’s what you want:
image

          - type: custom:apexcharts-card
            graph_span: 1h
            series:
              - entity: sensor.random0_100
                stroke_width: 2
            apex_config:
              yaxis:
                max: 100
                min: 0
              annotations:
                position: back
                yaxis:
                  - y: 33
                    y2: 0
                    strokeDashArray: 0
                    fillColor: red
                    borderColor: '#00000000'
                  - y: 66
                    y2: 33
                    strokeDashArray: 0
                    fillColor: yellow
                    borderColor: '#00000000'
                  - y: 100
                    y2: 66
                    strokeDashArray: 0
                    fillColor: green
                    borderColor: '#00000000'

You should get the idea with the example. Do not use now nor extremas with that config, it will not work.

1 Like

Thank you so much for your effort to help!
My recorder settings:

recorder:
  purge_keep_days: 2
  exclude:
    entities:
      - sensor.last_boot
      - sensor.date
      - sun.sun
    entity_globs:
      - light.*
      - sensor.shelly*

Restarted HA and pasted your code in a new card, but still the same, tried different sensors of the integration. I don’t get it? Maybe the word “data” or “value”? Unfortunately I don’t know Javascript… (yet? :wink: )

Are you running the latest version (the one I just published)? And made sure the javascript console shows that version?

Also once that is verified, could you try with:

                data_generator: |
                  console.log(entity);
                  return entity.attributes.data.map(
                  (item) => {
                    return [new Date(item.datetime).getTime(), item.value];
                  });

It should show you this in the javascript console of your browser:

@RomRider sorry, me too, I don’t know java and I’m stuck with data_generator
What should I put in my example to have the result from the same time yesterday?

 - entity: sensor.0x158d000678e709_temperature
    offset: '-1d'
    name: Hier
    show:
      in_header: before_now
    data_generator:  ??????

seems the array is empty?

So, first of all, many thanks for this. Finally my long search has stopped by displaying multiple axis for average and last 7 days electricity consumption.
As you can see from below image, I am able to display, but not sure if data is correct.
image
Same configuration for single axis in other card (mini-graph-card) is displaying correct data.
image

Also the data displayed on 03March, is actually data from 02March. Am I doing something incorrect…

  - type: custom:apexcharts-card
    graph_span: 7d
    header:
      show: true
      title: Electricity Consumption
      show_states: true
      colorize_states: true
    series:
      - entity: sensor.daily_energy
        type: column
        name: Daily Consumption
        group_by:
          func: max
          duration: 1d
      - entity: sensor.home_electricity_average_14_days
        type: line
        curve: straight 
        name: Average Consumption
        group_by:
          func: max
          duration: 1d
    apex_config:
      yaxis:
        - seriesName: Daily Consumption
          decimalsInFloat: 1
        - seriesName: Average Consumption
          decimalsInFloat: 1
          opposite: true

Try with func: last instead of func: max

To know if the array is empty, you’d have to expand what is displayed in the console. What is your browser?

Hi to all,
I havo two questions abiut Apex Chart.

  1. is possible to put the last 24hrs wind directions (degrees or cardinal) to a Radar or PolarArea Chart (data is picked up about every minute by a weather station and inserted in recorder)? How?

  2. Is possible to implement gauge as FusionCharts types?

thanks!!

now this is getting somewhere:

using:

  - type: custom:apexcharts-card
    header:
      show: true
      title: Windkracht
      show_states: true
    graph_span: 3d
    series:
      - entity: sensor.wind_bft
        stroke_width: 2
    apex_config:
      yaxis:
        max: 12
        min: 0
      annotations:
        position: back
        yaxis:
          - y: 2
            y2: 0
            strokeDashArray: 0
            fillColor: lightblue
            borderColor: '#00000000'
          - y: 4
            y2: 2
            strokeDashArray: 0
            fillColor: yellow
            borderColor: '#00000000'
          - y: 6
            y2: 4
            strokeDashArray: 0
            fillColor: green
            borderColor: '#00000000'
          - y: 8
            y2: 6
            strokeDashArray: 0
            fillColor: orange
            borderColor: '#00000000'
          - y: 10
            y2: 8
            strokeDashArray: 0
            fillColor: maroon
            borderColor: '#00000000'
          - y: 12
            y2: 10
            strokeDashArray: 0
            fillColor: black
            borderColor: '#00000000'

with this I can safely explore the set options you suggest, and see if additional ones are relevant. Oddly enough, the color of the graph itself isnt the purple color you show in the screenshot, but seems to be the default HA blue…

Because my default accent color is purple on my dev env :slight_smile: