ApexCharts card - A highly customizable graph card

[feldsperling (dietmar)]

Servus,

Is it somehow possible to get a history entity state ( in my case a Date for Sun rise and setting ) in the apex chart for annotations ? I got it working for “today” ( thx to someone posted it here … ) , but i also have an history Daily graph where it would be very nice if the annotations are correct .

i have some nyb problem to understand how i would be able to retrieve a entity states[‘sensor.home_sun_rising’].state from - X days . I use the custom-template already for buttons …

  - type: custom:config-template-card
    card:
      type: custom:apexcharts-card
      card_mod:
        style: |
          ha-card { border: none; box-shadow: none; } 
      now:
        show: false
      apex_config:
        annotations:
          xaxis:
            - x: ${new Date(states['sensor.home_sun_rising'].state).getTime()}
              label:
                text: ☼
                borderWidth: 0
                style:
                  background: "#0000"
            - x: ${new Date(states['sensor.home_sun_setting'].state).getTime()}
              label:
                text: ☾
                borderWidth: 0
                style:
                  background: "#0000"

I guess this needs to be done in JS , and i have looked into some samples but i lost how to try and error on this here .

so Variables in the card template , but how

var d = new Date();
 d.setDate(d.getDate() - 5);

d should be a date 5 days ago 

Any help would be great on this.

thx, Dietmar

[TheodorShep (Ben R)]

I don’t expect to see a lot of data in my graph.

[vingerha]

That is not what I meant, you state every 30 mins, which to me translates to a tick on the x-axis every 30 mins, that won’t work for your copied example of a 24-h graph

[TheodorShep (Ben R)]

That’s just how my graph is currently set up while I work out how this stuff works?

I’m asking what settings I’d have to achieve what I want.

[vingerha]

Details make a difference and do not assume one can just ‘guess’ what you want, this is an example where the span and the tickamoutn must(!) be aligned to get a 30 min tick

type: custom:apexcharts-card
graph_span: 4h
span:
  start: day
apex_config:
  xaxis:
    type: numeric
    tickAmount: 8
    position: bottom
    labels: 
      formatter: |
        EVAL:(timestamp) => {
          let date = new Date(timestamp);
          return date.getHours() + ':' + date.getMinutes()
        }

[Muccio78]

I’m struggling to set the left Y-axis dynamically based on the months.
In the configuration.yaml, I created two sensors, sensor.yaxis_min_temp and sensor.yaxis_max_temp, which return predefined MIN and MAX values depending on the current date.

For example:

• In January, they return -3 and 15.
• In August, they return 14 and 38.

This setup ensures a visually adaptive scale that fits the current month, which is much nicer than setting a fixed range like -5 to 40 for the entire year.

In the ApexCharts configuration, I referred to these sensors in the Y-axis settings:
apex_config:

yaxis:
- show: true
decimalsInFloat: 0
min: “{{ states(‘sensor.yaxis_min_temp’) | float | round(0) }}”
max: “{{ states(‘sensor.yaxis_max_temp’) | float | round(0) }}”

The scale doesn’t work and defaults to 0-10°C. However, if I manually set -3 and 15, everything displays perfectly.

It seems like ApexCharts doesn’t accept sensor values, only hardcoded numbers.
How to bypass this issue?

[vingerha]

for the templates you need to wrap it in the config card template (search hacs)
Or… with some javascript, see below example to get you started
Note that this only works in single-y-axis situations

apex_config:
  yaxis:
    min: |
      EVAL: function(min) { 
        let m = new Date().getMonth() 
        if (m == 0) {return -13};
        }
    max: |
      EVAL: function(max) { 
        let m = new Date().getMonth() 
        if (m == 0) {return 15};
        }

or… maybe nicer, you can create an array of numbers and use that with the month value…example for 3 months which will work Jan+Feb+Mar

apex_config:
  yaxis:
    min: |
      EVAL: function(min) { 
        let l = [-13,-10,-8]
        let m = new Date().getMonth() 
        return l[m];
        }
    max: |
      EVAL: function(max) { 
        let l = [15,17,19]
        let m = new Date().getMonth() 
        return l[m];
        }

[TheodorShep (Ben R)]

Sorry you took my own code as gospel.

[vingerha]

I am more confused then before`, what code? Anyhow, I will no longer respond to your posts, maybe someone else will

[Eisbaer2 (Wolfgang)]

Is it possible to influence the number of the vertical grid lines?

In my 3 day graph the are only lines at midnight between the days. I also want lines at noon (added in red). Is that possible? If yes, how?

[juspitt]

I can’t for the life of me to get any data to show from my sensor

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.smarthub_3504800011_yearly_overview_2024
    data_generator: |
      return entity.attributes.monthly_breakdown.map((entry) => {
        return {
          x: new Date(entry.date).getTime(),
          y: entry.usage
        };
      });

going to the template editor

{{ states.sensor.smarthub_3504800011_yearly_overview_2024.attributes.monthly_breakdown }}

returns:
[{'date': '2024-12-01', 'month': '12', 'year': '2024', 'cost': 166.56, 'usage': 802}, {'date': '2024-11-01', 'month': '11', 'year': '2024', 'cost': 146.49, 'usage': 660}, {'date': '2024-10-01', 'month': '10', 'year': '2024', 'cost': 183.28, 'usage': 938}, {'date': '2024-09-01', 'month': '9', 'year': '2024', 'cost': 211.03, 'usage': 1138}, {'date': '2024-08-01', 'month': '8', 'year': '2024', 'cost': 219.52, 'usage': 1207}, {'date': '2024-07-01', 'month': '7', 'year': '2024', 'cost': 173.69, 'usage': 888}, {'date': '2024-06-01', 'month': '6', 'year': '2024', 'cost': 146.36, 'usage': 694}, {'date': '2024-05-01', 'month': '5', 'year': '2024', 'cost': 130.76, 'usage': 586}, {'date': '2024-04-01', 'month': '4', 'year': '2024', 'cost': 169.78, 'usage': 862}, {'date': '2024-03-01', 'month': '3', 'year': '2024', 'cost': 295.94, 'usage': 1195}, {'date': '2024-02-01', 'month': '2', 'year': '2024', 'cost': 323.25, 'usage': 1961}, {'date': '2024-01-01', 'month': '1', 'year': '2024', 'cost': 291.47, 'usage': 1724}]

[susko]

I’m trying to figure out how to display such graph with ApexCharts:

I’m really stuck (going thru github docs), anyone done such?

Thank you in advance!

[vingerha]

fafaik it follows the ticks so you have to increase the xaxis tickamount…see one of my recent posts above.

[vingerha]

@juspitt

      return entity.attributes.monthly_breakdown.map((entry) => {
        return {
          x: new Date(entry.date).getTime(),
          y: entry.usage
        };
      });

    data_generator: |
      return entity.attributes.monthly_breakdown.map((entry) => {
        return [
          new Date(entry.date),
          entry.usage
        ];
      });

[vingerha]

What do you mean with ‘such graph’ as this seems a relatively straight forward line graph … and what have you tried? examples/code?

[Eisbaer2 (Wolfgang)]

@vingerha

tickAmount: 8

You mean to use/increase “tickamount” below? Didn’t change anything. The number of lines only changes by changing time interval. With only 24 hours I get much more lines.

  grid:
    show: true
    strokeDashArray: 1
    borderColor: "#444444"
    position: back
    xaxis:
      tickAmount: 3
      lines:
        show: true

[vingerha]

grid does not have tickAmount…again, look at my example

[Eisbaer2 (Wolfgang)]

Thank you!
With:

apex_config:
  tooltip:
    enabled: true
    enabledOnSeries: undefinded
    shared: Boolean
  chart:
    height: 200px
  xaxis:
    type: numeric
    tickAmount: 6
    position: bottom
    labels: 
      formatter: |
        EVAL:(timestamp) => {
          let date = new Date(timestamp);
          return date.getHours() + ':' + date.getMinutes()
        }
  grid:
    xaxis:
      lines:
        show: true

I get:

The number of lines is now as wished. But I want the lines fixed at 12:00 and 24:00. Is that possible?

[susko]

Bare with me as I try to explain this: so instead of displaying a single line for current power for a 7 day or 1 day period:

I would like to display it as in the example I originally posted:

As I understand, but do correct me if I’m wrong: graph above displays min and max values as a range and not a line (maybe my lack of not being a native English speaker is also a problem here) and avg value as a line.

I don’t have a code example, as I couldn’t find a reference for this in the docs.

[vingerha]

Since the ticks are related to the xaxis values, you would have to freeze the xaxis using span: start: day or end: day …
Maybe one can create a xaxis based on static data but have not seen/tried that yet