ApexCharts card - A highly customizable graph card

With config-template-card

Just like my other selector on the solar overview I posted some time ago in this thread.
Please search for that, I am on the road currently, so you’ll find it sooner than I can gat to my code :wink:

1 Like

Ok, I have more data to experiment with, so I think I can narrow down the issue and specify my question.

As I said, I’m simply trying to track energy costs, using statistics within this card. In the plot you see:

  • Fixed cost (Vast), which is a fixed amount per day and is negative due to a discount
  • Variable costs, which is climbing throughout the day
  • Total cost, which is the sum of fixed and variable and should also be climbing throughout the day, starting at the level of fixed cost

When I look at the history of the entities, all is fine and total cost is indeed climbing as it should. When I plot this in the card, however, I get a flat line (at the level of yesterday’s cost), until it shoots through zero. From then onwards, it behaves as expected.

So my question is: does anyone use statistics in this card en face the same issue. It doesn’t seem to be a bug of the card, because it can obviously plot negative statistics, as shown in this plot. There doesn’t seem to be an issue with the template sensor or the statistics integration either, because the same entity shows perfectly in the statistics card. Is it the combination of statistics and this card? Anyone?

Would anyone have an example of how to show a time in the header of a chart?

I have a sensor, which has a state of ie. 02:05 which is the last time there was a sucessful scrape of data from a webpage.

I’m having difficulty showing that in the header of my chart.

With the options I have currently set it is being displayed as 1. If the time was 05:54 the header is being displayed 5.

type: custom:apexcharts-card
graph_span: 30d
header:
  standard_format: false
  show: true
  title: OilPal
  show_states: true
  colorize_states: true

- entity: sensor.oilpalmodemlastreading
    name: Last Reading
    show:
      in_header: true
      name_in_header: true
      in_chart: false

As I was looking for an answer for using dynamically changing values for color_threshold for Nordpool-data, I struggled a bit to configure the custom:config-template-card to use dynamic values. The struggle for me was that I was first using too long variable names, they need to be shortish. So I hope this my lovelace card code sheds a little bit of light how to use these together:

  - type: custom:config-template-card
	variables:
	  MOVINGAVERAGE: >-
		states['sensor.nordpool_filter_price_today_average_whole_day_7days_moving_average']
	entities:
	  - ${MOVINGAVERAGE.entity_id}
	card:
	  type: custom:apexcharts-card
	  graph_span: 24h
	  apex_config:
		chart:
		  height: 170px
	  show:
		last_updated: true
	  experimental:
		color_threshold: true
	  header:
		title: Electricity price today 
		show: true
		show_states: true
		colorize_states: true
	  span:
		start: day
	  now:
		show: true
		label: Now
	  series:
		- entity: sensor.nordpool_kwh_fi_eur_3_10_024
		  show:
			extremas: true
			in_header: raw
			header_color_threshold: true
		  type: column
		  data_generator: |
			return entity.attributes.raw_today.map((start, index) => {
			  return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
			});
		  color_threshold:
			- value: ${MOVINGAVERAGE.state * 75}
			  color: darkgreen
			  opacity: 1
			- value: ${MOVINGAVERAGE.state * 100}
			  color: goldenrod
			- value: ${MOVINGAVERAGE.state * 125}
			  color: darkred
 
1 Like

I’m trying to customize the name of each auto-entities generated series using config-template-card, but my attempts all failed.
Does anybody know if my placement of code is wrong or if the syntax for area_name is wrong?
If I replace
name: area_name('this.entity_id') or name: {{ area_name('this.entity_id') }}
with
name: states['input_select.days_back_to_show'].state+'d'
I do get the name changed. But it is of course not series-linked, so this means little apart from Apex Charts supports templates in the name.

Relevant code (to not clutter the thread too much):

type: custom:config-template-card
entities:
  - input_select.days_back_to_show
variables:
  span: states['input_select.days_back_to_show'].state+'d'
  days: |
    -states['input_select.days_back_to_show'].state+'d'+'1d'
  name: area_name('this.entity_id')
card:
  type: vertical-stack
  cards:
    - type: custom:auto-entities
      sort:
        method: friendly_name
      filter:
        include:
          - entity_id: sensor.xiaomi_humidity_*
            options:
              name: ${name}

Also tried putting the template directly into the name field, but that failed also.

As this thread is about ApecCharts card, I suggest you ask your config template card -specific question also in the “official” 100% Templatable Lovelace Configurations thread. :slight_smile:

1 Like

@RomRider many thanks for your great work.

here one of my graph :wink:

type: custom:config-template-card
entities:
  - sensor.a_b_line_voltage
  - sensor.internal_temperature
  - sensor.input_power
  - sensor.sunrise
  - sensor.sunset
  - sensor.solar_noon
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  header:
    show: true
    show_states: true
    colorize_states: true
    title: PV Power and Grid Voltage Today
  graph_span: 14h
  span:
    start: day
    offset: +5.5h
  apex_config:
    annotations:
      position: back
      yaxis:
        - 'y': 253
          strokeDashArray: 2
          borderColor: '#FFFF00'
          borderWidth: 0.5
          label:
            borderColor: '#ADFF2F'
            borderWidth: 0
            borderRadius: 0
            text: 253V
            textAnchor: center
            position: right
            offsetX: -35
            offsetY: 2
            style:
              background: transparent
              color: '#FFFF00'
              fontSize: 10px
              fontWeight: 10
              fontFamily: Segoe UI
              cssClass: apexcharts-xaxis-annotation-label
        - 'y': 264.5
          strokeDashArray: 2
          borderColor: '#FF4500'
          borderWidth: 0.5
          label:
            borderColor: '#ADFF2F'
            borderWidth: 0
            borderRadius: 0
            text: 264.5V
            textAnchor: center
            position: right
            offsetX: -35
            offsetY: 1
            style:
              background: transparent
              color: '#FF8C00'
              fontSize: 10px
              fontWeight: 10
              fontFamily: Segoe UI
              cssClass: apexcharts-xaxis-annotation-label
      xaxis:
        - x: ${new Date(states['sensor.sunrise'].state).getTime()}
          strokeDashArray: 0.5
          label:
            text: ☀️
            orientation: orizontal
            borderWidth: 0
            style:
              background: '#0000'
              fontSize: 15px
            offsetY: 135
        - x: ${new Date(states['sensor.solar_noon'].state).getTime()}
          strokeDashArray: 0.5
          borderColor: trasparent
          label:
            text: ☀️
            orientation: orizontal
            borderWidth: 0
            style:
              background: '#0000'
              fontSize: 15px
            offsetY: 0
        - x: ${new Date(states['sensor.sunset'].state).getTime()}
          strokeDashArray: 0.5
          label:
            text: 🌙
            orientation: orizontal
            borderWidth: 0
            style:
              color: '#fff'
              fontSize: 15px
              background: '#0000'
            offsetY: 135
    chart:
      type: area
    stroke:
      show: true
    dataLabels:
      enabled: true
    legend:
      show: false
    grid:
      show: false
    yaxis:
      - seriesName: 1
        show: true
        forceNiceScale: true
        opposite: true
        decimalsInFloat: 0
      - seriesName: 2
        show: true
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
      - seriesName: 3
        show: false
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
      - seriesName: 4
        show: false
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
  all_series_config:
    stroke_width: 1
    group_by:
      func: last
      duration: 5m
    curve: smooth
    type: area
  series:
    - entity: sensor.a_b_line_voltage
      color: white
      extend_to: now
      name: Grid V
      unit: V
      float_precision: 2
      group_by:
        func: last
      show:
        in_header: true
        in_chart: true
        datalabels: false
      stroke_width: 1
      color_threshold:
        - value: 0
          color: white
          opacity: 1
        - value: 253
          color: white
          opacity: 0
    - entity: sensor.input_power
      color: green
      extend_to: now
      name: PV Power
      transform: return x / 1000;
      unit: kW
      float_precision: 2
      show:
        in_header: true
        in_chart: true
        datalabels: false
      color_threshold:
        - value: 0
          color: green
          opacity: 0.5
        - value: 1.5
          color: limegreen
          opacity: 0.4
        - value: 2.5
          color: lightgreen
          opacity: 0.3
        - value: 3.5
          color: springgreen
          opacity: 0.2
    - entity: sensor.internal_temperature
      color: red
      extend_to: now
      name: Inverter Temp.
      unit: °C
      float_precision: 2
      fill_raw: last
      show:
        extremas: max+time
        in_header: true
        in_chart: false
        datalabels: false

Immagine 2022-10-28 135530

1 Like

I am having trouble with this.entity_id and do not know if it is an apexcharts-card or config-template-card problem.
If anybody knows his way around this.entity_id , maybe you would take a look at it?

Thanks again for your answer, however, I managed to recreate the history card in apex.

It needed some helper and some statistic integration, but it works.

- type: custom:config-template-card
  variables:
    min_temp: parseFloat(states['sensor.six_hourly_min_temperature_living_room'].state)-0.5
    max_temp: parseFloat(states['sensor.six_hourly_max_temperature_living_room'].state)+0.5
  entities:
    - sensor.six_hourly_min_temperature_living_room
    - sensor.six_hourly_max_temperature_living_room
  card:
    type: custom:apexcharts-card
    graph_span: 6h
    header:
      show: true
      title: Living Room
      show_states: true
      colorize_states: true
    yaxis: # only 1 yaxis, no need for id or yaxis_id
      - min: ${min_temp}
        max: ${max_temp}
        apex_config:
          tickAmount: 4
    series:
      - entity: climate.thermostat_living_room
        attribute: current_temperature
        type: line
        stroke_width: 2
        name: Living Room Temperature
        group_by:
          func: max
          duration: 5min
      - entity: climate.thermostat_living_room
        attribute: temperature
        type: line
        stroke_width: 2
        name: Target Temperature
        group_by:
          func: max
          duration: 5min
      - entity: sensor.hvac_mode_living_room
        type: column
        group_by:
          func: max
          duration: 5min
        show:
          legend_value: false
          in_header: false
    apex_config:
      legend: { show: false }

#For getting the heating mode(red bars)
- name: "HVAC Mode Living Room"
  state: >-
    {% if is_state_attr("climate.thermostat_living_room","hvac_action","heating") %}
      {{state_attr("climate.thermostat_living_room","current_temperature")}}
    {% else %}
      {{ 0 }}
    {% endif %}

# For min max y axis value:
- name: "Max Temperature Living Room"
  state: >-
    {{ [state_attr("climate.thermostat_living_room","current_temperature"),
    state_attr("climate.thermostat_living_room","temperature")]|max}}

- name: "Min Temperature Living Room"
  state: >-
    {{ [state_attr("climate.thermostat_living_room","current_temperature"),
    state_attr("climate.thermostat_living_room","temperature")]|min}}

#Rolling min max for 6 hour
- platform: statistics
  name: "Six Hourly Max Temperature Living Room"
  entity_id: sensor.max_temperature_living_room
  state_characteristic: value_max
  max_age:
    hours: 6

- platform: statistics
  name: "Six Hourly Min Temperature Living Room"
  entity_id: sensor.min_temperature_living_room
  state_characteristic: value_min
  max_age:
    hours: 6
3 Likes

hi
I want to create a scatter graph based on 2 sensors. I collect them with a 3rd template sensor once every so often, and want then to get out a point with one measurement on the x and one on the y axis. Can someone help me? (I don’t know much coding). Thanks!
edit: What I have so far:
the template to collect the 2 sources into 1:

- trigger:
    - platform: time_pattern
      hours: /12
      minutes: 1 
      seconds: 5
   sensor:  
    - name: cop 12 hourly vs temp
      unit_of_measurement: cop, °C
      state: >
             {{ (states('sensor.cop_12_hourly')|float(0))}}, {{ (states('sensor.average_temp_last_12hrs')|float(0)) }}

and my try:

type: custom:apexcharts-card
chart_type: scatter
apex_config:
  xaxis: numeric
series:
  - entity: sensor.cop_12_hourly_vs_temp
data_generator: |
  ???
xaxis: cop
yaxis: °C

How do I format this properly, as how to config xaxis and data_generator?
I got some hints at my topic below, but didn’t get through yet. Thanks.

Hi,

I have been fiddling for a few weeks now trying to figure it out myself, but I really can’t get it working. Can anyone please help me?
I have a ‘Zonneplan One’ device that provides a number of sensors for ‘future power price’ (so the energy-price for the following hours). It provides 8 sensors in total. "price in 1 hour, in 2 hours, etc.

I consolidated the sensors in one template sensor:

I want to get a bar-graph that puts these items next to each other (preferably auto-scaled, starting with 0,00, so it has some ‘body’). If at all possible, it would also be nice if it would show the ‘hour’ of the given value. I haven’t managed to get that working too.

So suppose it’s 13:30 now, so the ‘next hour’ starts at ‘14:00’, it would be nice if it said so.

sorry I can’t help with your specific goal. Did you look at alternatives? For me the nordpool custom component works well, with a template for the additional cost of the provider and up to 35 hours in advance.

1 Like

Hello, anyone knows if “dots” as series type is or will be supported?

You have done what I have look for the last few weeks. Looks really good.
Is it possible for you to share your hourly energy usage graph?

/Niklas

First of all, your card is absolutely great! Many thanks for all the hard work :clap:
Would it be possible to have a faded fill?
Now I just have the opacity putted on a specific value.

But I would like to have the fill faded like this …

Is there an easy way to do this?
Many thanks

Thanks for looking anyway :slight_smile:

It looks great! Could you please share the configuration for apexchart?

Yes, it is possible. Mine is very soft but if you look closely it is gradient :slight_smile:

apex_config:
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0
      inverseColors: false
      opacityFrom: 0.3
      opacityTo: 0
      stops:
        - 0
3 Likes

Solved by changing the state_class from total_increasing to total

Many thanks! That did the trick :slight_smile: really appreciate your support :+1:!