ApexCharts card - A highly customizable graph card

Not sure what that would be but this is one option
Header to provide option to show entity value at current time · Issue #86 · RomRider/apexcharts-card (github.com)

Ah nice thanks that is the option I want:

show:
  in_header: raw

And the order fix the issue with the red line.

Thanks a lot

Hi all,

Entirely new to apexcharts card so silly question (that I can’t see has been answered, but forgive me if it has).

Is it possible to have distinct sensors form the x-axis? I’m looking at building something like this:

with the aim of displaying current values of sensors/helpers, maybe if I’m feeling fancy have shadow twin columns for ‘yesterday’ values.

I need a hand with aggregating data into buckets for a particular month, not just a time period 30 days.

FULL DETAILS

The below image shows 87.7mm for January. This is accurately added up in SmartMixn

CARD I WANT TO MAKE MORE ACCURATE
APEX CHARTS Monthly Rain Fall Graph
I am using the Rain Per Hour Sensor. It is close but not quite right because of the uneven shift of data over the month. Using the long term statistics option in this card is key.
The below graph shows 82.3 for January, because of the shift in data, and being on the 12 June Currently (Last 30 days is not in line with the months)

          - type: custom:apexcharts-card
            graph_span: 365d
            header:
              show: true
              title: Monthly Rainfall
              show_states: false
            apex_config:
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0.0
                  opacityFrom: 1
                  opacityTo: 0.5
                  stops: 10
              chart:
                height: 150px
              grid:
                show: false
                borderColor: darkslateblue
                strokeDashArray: 2
              dataLabels:
                background:
                  borderWidth: 0
                  opacity: 0
                  foreColor: white
                offsetY: -10
              plotOptions:
                bar:
                  borderRadius: 0
                  dataLabels:
                    position: top
            span:
              start: month
              offset: '-334.5833333333333d'
            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

Is it possible to show the minimum value of the Serie in the header?

I managed to fix the graphs:

See the link below for the full code.

@MelleD following the above, yes you can show the minimum value in the header, you will need to put a second series in your chart and hide it. The value can then be shown in the header.

Ok thanks. I will try that

hello can you post code?

Tell me how to remove the names of the sensor when showing the state of an object?

Hi there.
I need help with filling the stepline with solid color, if the boolean enitity is 1. Any recommendations?
help

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 2h
apex_config:
  chart:
    height: 100px
header:
  show: false
  title: Main Boiler
  show_states: false
  colorize_states: true
series:
  - entity: input_boolean.jablotron_motion_detector_all
    transform: 'return x === ''on'' ? 1 : 0;'
    curve: stepline
    invert: false
    stroke_width: 2
yaxis:
  - show: false
    apex_config:
      tickAmount: 1

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.