ApexCharts card - A highly customizable graph card

hello can you send me this code?

hello this is my code, how I can set a theme?
image

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 14h
show:
  last_updated: true
span:
  start: day
  offset: +5.5h
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: false
  title: Fotovoltaico
yaxis:
  - min: 0
    max: auto
    decimals: 0
    apex_config:
      tickAmount: 15
series:
  - entity: sensor.somma_produzione_attiva_2_impianti_in_w
    show:
      header_color_threshold: true
      extremas: true
    type: column
    group_by:
      func: avg
      duration: 1m
    color: 0cb005
        series:
            show:
              name_in_header: false
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 30.41666666666667d
                  fill: zero
                statistics:
                  type: state
                  period: hour
                  align: end
                show:
                  name_in_header: false
                  datalabels: true

Hi all, I’m trying to replace my solar forecast integration and it presents data in a totally different way. I’m struggling to work out how to extract the hourly forecasts for my apexcharts-card graph. Here’s the code I’m using currently for Solcast:

data_generator: |
  var today = entity.attributes.detailedForecast.map((start, index) => {
    return [new Date(start["period_start"]).getTime(), entity.attributes.detailedForecast[index]["pv_estimate"]];
  });
  var data = today
  return data;

Here’s the new attribute data I need to modify this for (truncated):

wh_period: 
'2024-06-19T00:00:00+01:00': 0
'2024-06-19T01:00:00+01:00': 0
'2024-06-19T02:00:00+01:00': 0
'2024-06-19T03:00:00+01:00': 0
'2024-06-19T04:00:00+01:00': 1.25
'2024-06-19T05:00:00+01:00': 128.5

Any help would be appreciated!

EDIT: Looks like this does the trick:

data_generator: |
  return Object.entries(entity.attributes.watts).map(
    ([key, value]) => [new Date(key).getTime(), value / 1000.0]
  );

I feel kinda stupid for not being able to find a solution/earlier mention of this, but how do I get rid of the line at the beginning of the day. It’s a remainder of the value of the previous day. I tried manipulating the database by adjusting the time to exactly 00:00:00 instead of some (milli-)second past midnight, but without any luck.

I was thinking to solve it using the data_generator and filtering out the first few (milli-)seconds, but I don’t think I can use regular entities/sensor in the data_generator (at least, I have no clue how to obtain it’s x/y values)

image

If you want to have it start exactly at 00:00 then I believe you have no simple option wrt to the data.
Possibly you could write a script in apex that sets the first value to 0 but that might not be reality if it has been raining before.
What I would do: add an offset of 1 minute to the data/series

The problem with that is that 0 (reset) value gets pulled to the previous day :upside_down_face:

Have you tried the span setting? End or start

      - type: custom:apexcharts-card
        graph_span: 30d
        header:
          show: true
          title: Daily Rainfall
          show_states: false
        span:
          end: day

If you pull statistics you can align end, middle or start.

Use a + or - offset and indeed the span, as long as you are not changing / modifying the data (which is not that easy imo) you have to settle for a non-perfect representation.

From documentation.

This seems to get me very very close :slight_smile:
Pulling stats per 5minutes in combination with an extra entity to just show the true state in the header.

type: custom:apexcharts-card
graph_span: 1d
header:
  show: true
  show_states: true
now:
  show: true
span:
  start: day
apex_config:
  chart:
    height: 150px
  legend:
    show: false
series:
  - entity: sensor.rainfall_today
    show:
      in_chart: false
      name_in_header: false
  - entity: sensor.rainfall_today
    unit: mm
    color: 488fc2
    type: line
    stroke_width: 2
    extend_to: now
    show:
      in_header: false
    statistics:
      type: state
      period: 5minute
      align: start
    group_by:
      func: raw
      duration: 1d

1 Like

Hi,

The ApexChart Card for Home Assistant is a really great package - and it’s derived from the ApexChart.JS project.
That kind of brings me to my issue:

For my data, I want to display the current state with a Radar plot (also called a Spider or Web plot).

basic-radar-chart

ApexCharts.JS does support Radar Charts. That’s where I have the example image from.

ApexCharts Card does not have the radar plot in its chart_type options.

But … it has apex_config options. These only apply to the Options in ApexCharts.JS, not the whole command set?
Now I’m properly confused.

Are Radar Charts possible in the ApexCharts card? Maybe via the apex_config option? And if so, does anyone has a working example I can built off from?

Much appreciated,

Thomas

Hi, I’m asking for help from someone more experienced than me, I need to create a graph of a sensor that records the values ​​from 7pm to 5am for 7 days.
what is the correct code for recording time?

Now it’s as shown below, but it’s not good…

graph_span: 11h
show:
last_updated: true
span:
start: day
offset: +19h

This might get you close if you adjust the figures to 7 days. It will create buckets of 24hrs.

Hi, but I need to monitor the window that goes from 05 in the morning to 07 in the evening for 7 days… I don’t know how to modify the code…

Just to be clear, in 1 graph you want to see 7 days of data but only those values between 19:00 and 05:00, i.e. for the other times it should be 0 ?

Yes exactly I only want to see the values ​​of one sensor from 7 in the evening to 5 in the morning, the other times don’t interest me.
basically I want to see every day, for 7 days, how much discharge my battery has.

Not easy as it is over multiple days, not even sure if feasible. You would need some functon for the series… I will try a bit but not sure if I can :slight_smile:

EDIT, no clue sorry… alternative is to create a template sensor that would only register if the time is between 1900 and 0500 and use that in the chart

1 Like

Ah, right! I did not think about it! I’ll try to create a sensor that records the battery discharge at those times…
Thank you!

I tried to create this sensor with helpers, but I don’t think it can be done… I didn’t succeed