ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
2520

My config for the card is right below the second picture. Clearly this is a minimal example rather than my proper config. The point is that the moment that I put in any second series which doesn’t use the data generator, i.e. is a real historical time series, no matter if I configure it as a line, column, area whatever, in addition to the inpo_praha_forecast series I generate for the future, the columns of the original data-generated series become drawn as vertical lines instead of proper columns, as shown in the second screenshot. The content of the new (blue) series does not matter.

In case this isn’t clear - I am referring to the orange bars not the blue series on the second screenshot, which is just some illustrative sensor.

In my real case I have a bunch of line graphs for temperature etc over the last 24-hours and I try to plot the rain forecast in the manner show above.

2521

Again, “real historical time series” AND "Forecast from “data-generated” , how would you ever thing these 2 would “work well” together … Forecast VS “historical time series” on same time-line ???

PS: it’s do-able with “some” adequate configuration :wink: , thou i really don’t know how you are thinking here, is you timeline “historic” or is it “forecast” ( Future ) ?

2522

In case it helps you, here is the real plot:

image

Orange is temperature over the previous day. Green filled – temperature today up to the blue dashed line – now. That’s historical data. Then it continues as the dark green line from the forecast as a data_generated series for the rest of today. This is temperature and line graphs and it works fine.

The problem is with the bar charts (white vertical line here for the snow forecast). If I remove all the line series, the thin white line becomes the proper bar wide column that it should be. Exactly the same behaviour as in my initial post with the minimal example.

2523

Yes that’s 3 sensors

  1. orange
    2.light green
    3 dark green
    (4 if you count the snow-forecast)

Could you show the “config” for that card ? would be interesting to know how your xaxis, and “start” of the various series looks like

2524

In fact, there are even more lines on there in reality – they are to do with rain and it hasn’t rained recently (apart from the forecast snow at 16:00). The chart is quite overloaded. But the problematic behaviour is independent of that. In any case, here is the full config for the real weather plot:

type: custom:apexcharts-card
series:
  - entity: sensor.wu_holesovice_temperature
    yaxis_id: temp
    name: wczoraj
    type: area
    opacity: 0.1
    fill_raw: 'null'
    offset: '-1d'
    color: '#F79800'
    show:
      legend_value: false
      in_header: false
      offset_in_name: false
      name_in_header: false
    stroke_width: 1
  - entity: sensor.inpo_praha_forecast
    yaxis_id: temp
    name: prognoza
    type: line
    stroke_width: 3
    color: '#458800'
    data_generator: |
      return entity.attributes.forecast_time.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.forecast_temperature[index]];
      });
    show:
      extremas: true
      legend_value: false
      in_header: false
      offset_in_name: false
      name_in_header: false
  - entity: sensor.inpo_praha_forecast
    yaxis_id: rain
    name: rain
    type: column
    color: '#4477EE'
    data_generator: |
      return entity.attributes.forecast_time.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.forecast_precipitation[index]];
      });
    show:
      extremas: false
      legend_value: false
      in_header: false
      offset_in_name: false
      name_in_header: false
  - entity: sensor.inpo_praha_forecast
    yaxis_id: rain
    name: snow
    type: column
    color: '#FFFFFF'
    data_generator: |
      return entity.attributes.forecast_time.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.forecast_snow[index]];
      });
    show:
      extremas: false
      legend_value: false
      in_header: false
      offset_in_name: false
      name_in_header: false
  - entity: sensor.wu_holesovice_temperature
    yaxis_id: temp
    type: area
    opacity: 0.4
    name: Temperatura
    extend_to: false
    color: '#90F800'
    show:
      extremas: true
      legend_value: false
      name_in_header: true
    stroke_width: 2
  - entity: sensor.wu_holesovice_precipitation_accumulation
    yaxis_id: rain
    name: Deszcz
    type: column
    color: '#4477EE'
    show:
      legend_value: false
      name_in_header: true
    group_by:
      duration: 1h
      start_with_last: true
      func: diff
graph_span: 24h
now:
  show: true
span:
  start: day
yaxis:
  - id: temp
    min: ~0
    max: ~10
    align_to: 5
    decimals: 0
    apex_config:
      tickAmount: 3
      decimalsInFloat: 0
  - id: rain
    min: 0
    max: ~1
    align_to: 1
    decimals: 1
    opposite: true
    apex_config:
      tickAmount: 3
header:
  show: true
  show_states: true
  colorize_states: false
  title: Holešovice
apex_config:
  chart:
    height: 200px
  legend:
    show: false
2525

Well one could say “you hit the end of the road” … anyhow reporting “A Bug” upon this config, and/or the initial examples is doubtful, as would be for the author/dev of the card to spend time looking into it

If you have such a strong need for Mixing… Area, Line and Columns … with Past, Present and Future … Make sure you read the full documentation of this Card, AND https://apexcharts.com/

PS: Yes i have also “noticed” mentioned behavior, even when a “column-serie” suddenly becomes a “line-serie” , … Thou your " sensor.electricity_total_energy " example is a VERY bad example to “report” anything, as are you “lastest / Full” config, you should read a-little more about columns, as this seems to be your “current” issue

2526

How did you egt the vertical line at 1.00? Is that an annotation? Please share the code if you don’t mind :slight_smile:

2527

@Lunkobelix

Atleast thats the only “white” entries in this graph " Snow forecast" ( and he metioned this above)
Thou even here, as well as the rain (predictions)), both columns with no “further” configuration

And seems nowhere is it specified how ALL these columns should be “presented” … Rain/Snow/Accum-Rain … im not surprised there are “issues” , but i find it somehow peculiar assuming it’s caused by a “bug”

2528

Which one do you mean? The x-Axis is times. Did you mean the white line at 16:00? This is the vertical line that appears instead of a column which is the problem I am trying to resolve and not a choice. You can see my whole config a couple of messages above.

2529

Can you please suggest how I am supposed to configure a column chart then? What required options am I missing? Just so you know, the wife white bar actually appears for a fraction of a second when the page is reloaded and disappears immediately.

2530

Ah, my misstake. I have been trying to get a vertical line with annotations without succeeding :slight_smile:

2531

well you are in a “grey” area for sure

Have you tried first of all with

span:
  start: hour

Not “day”

And maybe this will help you “somewhere” ( atleast with the “forecast-data” )

all_series_config:
group_by:
func: raw
duration: 1h

2532

What are you using for your x: Number ?

2533

thanks so much! it’s working perfectly!

2534

That seems to have done the trick: func: sum was the necessary parameter for the data generator function which produces single data points once per hour. Thanks!

1 Like
2535

Right now, nothing. But I have tried everything I can come up with including code from others that I have read also struggling with this :laughing:

I assume that the annotation should have input as a date format.

But this is no big deal, I have other Apex questions keeping awake at night :wink: But thanks for asking.

2536

Is it possible to have the states on top show the current/last value of a series, but the series itself be grouped? I have my solar produktion and consumption as two series, but want to “flatten” the curves (grouping by 5 min), but I want the current solar produktion and current house consumption to be shown on top.

image
image1018×940 99.4 KB

Edit: I think I found it myself. in_header: raw will use the raw data, not the grouped data, inside the header.

I was using transform functionality to change Watts to kW inside the series. Howeve, when using in_header: raw it would not transform and display W instead of kW in the header. I had to create a template sensor for that and remove the transform function from the series.

image
image742×1072 43.7 KB

2537

Is it possible to hide this?

image
image1179×974 54.8 KB

2538

yes ofcause

2539

For some reason, the y axis labels are shown with font Times New Roman (or similar) while other text in my dashboards are shown correctly with Segoe UI Light. This is only an Issue on my iPad. Most often when something isn’t working it’s because I messed something up, can you see what is wrong here? :slight_smile:

apex_config:
  yaxis:
    - id: Effekt
      max: 2000
      forceNiceScale: true
      decimalsInFloat: 0
      opposite: false
      show: false
      labels:
        style:
          fontSize: 10px
          fontFamily: Segoe UI Light