ApexCharts card - A highly customizable graph card

[DragonQ (Tyler Brandon)]

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]
  );

[Miura]

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)

[vingerha]

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

[Miura]

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

[Chykan (Andrew)]

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.

@Chykan

            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

[vingerha]

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.

[Chykan (Andrew)]

From documentation.

[Miura]

This seems to get me very very close
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

[Thomas01 (Thomas)]

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

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

[wifi75 (wifi)]

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

[Chykan (Andrew)]

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

Making an Accurate Rain Graph, Day, Month, Year (Netamo, SmartMixn and Others.)

UPDATE I managed to fix the accuracy issues in the APEX CHARTS Rainfall Graphs. They now mirror my data stored on SmartMixn, from the same weather sensors. APEX CHARTS Monthly Rain Fall Graph (12 Months) [image] Some Important settings # For the "Rain This Month" (VISIBLE IN CHART)(Using the Rain Accumulated Per Day sensor) graph_span: 12month # 12 month graph span span: end: month # Span ends at the end of the month group_by: func: sum # Sum duration: 1month # 1 Month Data fill: z…

[wifi75 (wifi)]

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…

[vingerha]

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 ?

[wifi75 (wifi)]

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.

[vingerha]

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

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

[wifi75 (wifi)]

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!

[wifi75 (wifi)]

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

[vingerha]

This is not the correct thread for that, you would need a template, start another item in the forum, people are there to help.

[mitch83 (Michael K)]

Hi,

is it possible to set the zero point of the right y-axis to the zero point of the left y-axis?

Much appreciated,
Michael

[Snubbeke (Peter van der G)]

Following code is used to create a radial bar that dynamically changes the gradient color from blue to red based on the entity value which is a boiler temperature.
For example the right one I would expect to be blue because the temperature is 28 and the left looks good but once the temperature drops, it becomes like the right one.

How can I get the thresholds and stops so that they change color based on the temperature vs the max 80?
Example 1)
On temp 50 the radial should be blue, orange and starting to become red.
Example 2)
On 30 it should go from dark blue to medium blue, hence no orange or red like to picture!

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.boiler_apartment_temperature
        color_threshold:
          - value: 0
            color: '#0000FF'
          - value: 20
            color: '#0000FF'
          - value: 30
            color: '#007FFF'
          - value: 40
            color: '#FFA500'
          - value: 50
            color: '#FF0000'
          - value: 60
            color: '#FF0000'
        show:
          legend_value: false
        max: 80
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -108
          endAngle: 108
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 80%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: dark
          type: radial
          shadeIntensity: 0.5
          inverseColors: true
          opacityFrom: 1
          opacityTo: 1
          colorStops:
            - offset: 0
              color: '#0000FF'
            - offset: 25
              color: '#007FFF'
            - offset: 50
              color: '#FFA500'
            - offset: 100
              color: '#FF0000'
      stroke:
        lineCap: round
      legend:
        show: false
      chart:
        height: 240
  - type: custom:mushroom-template-card
    multiline_secondary: false
    entity: sensor.boiler_apartment_temperature
    layout: vertical
    primary: |
      {{states('sensor.boiler_apartment_temperature')}} °C
    secondary: |
      Boiler: {{states('switch.ariston_apartment_power')}}
    icon: |-
      {% if states('sensor.boiler_apartment_temperature')  | float < 40 %}
        mdi:thermometer-alert
      {% else %}
        mdi:thermometer
      {% endif %}
    icon_color: |-
      {% if states('sensor.boiler_apartment_temperature')  | float > 55 %}
        red
      {% elif states('sensor.boiler_apartment_temperature')  | float > 45 %}
        orange
      {% else %}
        blue
      {% endif %}
    card_mod:
      style: |
        ha-card {
          margin-top: -120px !important;
          width: 120px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          border-width: 0px !important;
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: switch.ariston_apartment_power
    double_tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: water_heater.apartment