ApexCharts card - A highly customizable graph card

Morning Stefan.

Will give that a go later today.

How I report the hours is a working progress, but may be enough for you to start with. I have a wiser system that has the attributes for when the TRV’s are heating and not heating.
To count the hours, I created several toggels using the helper, i.e Lounger Radiator. Then I used a simple automation to see when the the trv are heating and flip that toggle switch on

alias: Lounge radiator on
description: ""
trigger:
  - platform: device
    device_id: 4dd8d15d3a96f59cf25eafc396ffccce
    domain: wiser
    entity_id: climate.wiser_lounge
    type: started_heating
condition: []
action:
  - service: input_boolean.turn_on
    data: {}
    enabled: true
    target:
      entity_id:
        - input_boolean.lounge_radiator
mode: single

Another automation to flip it off when not heating. This is the bit I don’t like, I know there is another way I can do this in configuration template, just not managed to get it working properly by exposing the right attribute from the climate.wiser_lounge entity yet.
Anyway, I then counted how long that toggle was on, using a custom sensor.yaml file.

- platform: history_stats
  name: Lounge radiator heating
  entity_id: input_boolean.lounge_radiator
  state: "on"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) }}"
  end: "{{ now() }}"

The sensor.yaml file is included in the configuration.yaml

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
sensor: !include sensors.yaml

Last step, reference the “Lounge radiator heating” made in the sensor.yaml into apex series

I’m not sure how familiar you are with yaml, personally I have never touched this and a complete beginner, however, I include all the steps here in case somebody like me learns from this

I have sperate counting for the actual boiler on time, as you well know the amount of time the radiators are on, does not actually reflect the time the boiler is fired up, I’m looking for a smarter way to incorporate that statistic with the radiator on into the graphs

- platform: history_stats
  name: Heating on Today
  entity_id: sensor.wiser_heating
  state: "On"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) }}"
  end: "{{ now() }}"

It worked, I had come across that code before, however, because the view did not dynamically change in the viewer, I assumed it did not work, but you have to save it and refresh for some reason.

Cheers bud

Complete code for anyone looking back at this for my solution.

type: custom:apexcharts-card
style: |
  div#header__title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  ha-card {
    background-color: transparent;
    box-shadow: none;
    border: none;
    font-size: 20px;
  }
chart_type: donut
header:
  title: Radiators time on today
  show: true
  show_states: true
  colorize_states: true
apex_config:
  style:
    fontSize: 20px
  legend:
    show: false
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(1) + "%";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(2) + " hour"
                }
series:
  - entity: sensor.lounge_radiator_heating
    name: Lounge
    float_precision: 2
    color: '#2ECC71'
  - entity: sensor.kitchen_radiator_heating
    name: Kitchen
    float_precision: 1
    color: '#3498DB'
  - entity: sensor.study_radiator_heating
    name: Study
    float_precision: 1
    color: '#8E44AD'
  - entity: sensor.hallway_radiator_heating
    name: Hallway
    float_precision: 1
    color: '#E74C3C'
  - entity: sensor.charottes_radiator_heating
    name: Charlie
    float_precision: 1
    color: yellow
  - entity: sensor.master_bedroom_radiator_heating
    name: Master
    float_precision: 1
    color: cyan

Thanks, my version is working now:

image

Only if I hoover and the Total in the middel change to the part the data is not use the format:

image

Do you have a idea to get there the hours like the labels on the top?

Steffen

Hello all,

Although I have been reading the documentation I can’t solve this issue. Need a bit help.
My goal is to show in an ApexChart columns of the attribute of an entity.
With some helpers I created new entities of the attribute from an existing entity

I used this code:
type: custom:apexcharts-card
header:
show: true
title: Helper
show_states: true
colorize_states: true
series:

  • entity: sensor.winddelen_totaal_helper_day1
    type: column
    stroke_width: 8
    name: ma
  • entity: sensor.winddelen_totaal_heperday2
    type: column
    stroke_width: 8
    name: di
  • entity: sensor.winddelen_helper_day3
    type: column
    stroke_width: 8
    name: wo
  • entity: sensor.winddelen_totaal_day4
    type: column
    stroke_width: 8
    name: do
  • entity: sensor.winddelen_totaal_deel5
    type: column
    stroke_width: 8
    name: vrij

The problem is that the columns don’t line up correctly:

Schermafbeelding 2023-12-29 om 20.53.40

I think I’m missing some point.

I would like to add an annotation (a horizontal line to my chart) which represents a HA sensor value (sensor.48_hour_anerage_electricity_profit_cost) - I would like this to be an annotation so it can be labeled.

If I use a fixed value this works… how do I use a HA sensor value?

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
  title: 30 min Average Elec Profit / Cost
experimental:
  color_threshold: true
show:
  last_updated: true
series:
  - entity: sensor.30_min_anerage_electricity_profit_cost
    yaxis_id: elec_cost
    curve: stepline
    float_precision: 2
    show:
      extremas: true
      header_color_threshold: true
    color_threshold:
      - value: 0
        color: green
      - value: 0
        color: red
now:
  show: false
  color: red
  label: Now
update_interval: 30s
graph_span: 48h
cache: true
apex_config:
  annotations:
    yaxis:
      - 'y': 0.5
        borderColor: '#00E396'
        borderWidth: 4
        label:
          text: mean
  stroke:
    show: true
    width: 2
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
yaxis:
  - id: elec_cost
    show: true
    opposite: false
    apex_config:
      forceNiceScale: true
      labels:
        style:
          colors: '#ff0000'
      tickAmount: 8

The above code works - the problem is if I try and do something like this (which I know is incorrect - how do I use this sensor value for 'y': )

apex_config:
  annotations:
    yaxis:
      - 'y': sensor.48_hour_anerage_electricity_profit_cost
        borderColor: '#00E396'
        borderWidth: 4
        label:
          text: mean

Not sure, my only thought it may be a floating point issue not inforced.

Hi!
First of all, using ApexCharts is great! So much ideas…
However, I don’t know if this is possible? I’m using the experimental color_threshold settings. Would it be possible to use sensor values for setting the threshold? Use case: I want to color my line graph based on the average cost of energy on a certain day. Also, I can’t seem to be able to use theme variables for the threshold colors. Anyone knows why and how to do that?
If helpful, this is my card right now:

type: custom:apexcharts-card
graph_span: 24h
header:
  title: Energie prijzen vandaag
  show: true
  show_states: true
span:
  start: hour
  offset: '-3h'
now:
  show: true
  label: Nu
apex_config:
  legend:
    show: false
update_interval: 1min
experimental:
  color_threshold: true
series:
  - entity: sensor.epex_spot_data_net_price
    name: Huidige prijs
    type: line
    extend_to: end
    curve: smooth
    unit: ' ct/kWh'
    float_precision: 2
    stroke_width: 3
    show:
      in_header: before_now
    data_generator: |
      return entity.attributes.data.map((entry) => {
        return [new Date(entry.start_time), entry.price_ct_per_kwh];
      });
    color_threshold:
      - value: 19
        color: '#859900'
      - value: 21
        color: '#b58900'
      - value: 23
        color: '#dc322f'
      - value: 25
        color: '#2A0134'
  - entity: sensor.average_energy_price_calculated_ct_kwh
    name: Gemiddelde prijs
    type: line
    extend_to: end
    stroke_width: 1
    unit: ' ct/kWh'
    float_precision: 2
    color: var(--solarized-base2)
    group_by:
      func: max
      duration: 24h

HI @hennerich I’m glad that everything works and my example is useful to you.

However, if you would like to upgrade your chart with a more powerful solution, I’ve switch from my previous chart (the one you’re using) to this new solution:

Hope you like it!

Have a nice day!

Andrea

1 Like

This does not work either… Any help appreciated :slight_smile:

variables:
  my_av: states['48_hour_anerage_electricity_profit_cost'].state
apex_config:
  annotations:
    yaxis:
      - 'y': ${my_av}
        borderColor: '#00E396'
        borderWidth: 4
        label:
          text: mean

Wondering if anyone can guide me on how to create something like this (se picture).

Basically I want to plot that line on a graph and then a point showing current state (based of temperature and humidity readings). This is to show if my house is in the risk area of mold in basement (anything under line is ok).

Note that the blue line is static, and the red dot changes based on readings.

I’ve tried googling but haven’t found anything similar.

Hi,

anybody have a hint why the extrams of the line and the boxes not drawed on same position (the extrame value is drawed black an the line points but the underneath blue box is on the left)?

image

Here is the code:

      - type: custom:apexcharts-card
        update_interval: 1h
        cache: true
        graph_span: 8d1s
        span:
          end: day
        header:
          show: false
          show_states: true
          colorize_states: true
        show:
          loading: true
          last_updated: false
        apex_config:
          tooltip:
            enabled: false
          grid:
            show: false
          legend:
            show: false
          chart:
            type: bar
            stacked: true
            height: 280
            offsetY: -10
            offsetX: 10
            width: 95%
          plotOptions:
            bar:
              borderRadius: 5
              dataLabels:
                position: center
          dataLabels:
            enabled: true
            offsetY: 0
            style:
              fontSize: 10px
              fontWeight: lighter
              colors:
                - '#1f1f1f'
          xaxis:
            show: false
            border: false
            forceNiceScale: true
            labels:
              show: true
              format: ddd.
              style:
                fontSize: 12px
                fontWeight: lighter
                colors: '#9B9B9B'
          yaxis:
            show: false
            border: false
            forceNiceScale: true
        all_series_config:
          curve: smooth
          float_precision: 0
          fill_raw: last
          opacity: 0.75
        series:
          - entity: sensor.hst_heizzeit_bad_protag
            name: Bad
            type: column
            group_by:
              func: max
              duration: 1day
            color: '#a8e6cf'
            stroke_width: 2
            show:
              datalabels: true
          - entity: sensor.hst_heizzeit_wohnen_protag
            name: Wohnen
            type: column
            group_by:
              func: max
              duration: 1day
            color: '#ffd3b6'
            stroke_width: 2
            show:
              datalabels: true
          - entity: sensor.hst_heizzeit_keller_protag
            name: Keller
            type: column
            group_by:
              func: max
              duration: 1day
            color: '#ff8b94'
            stroke_width: 2
            show:
              datalabels: true
          - entity: sensor.mmx_hausoutdoor_temp_mean
            name: Außentemperatur
            type: line
            color: '#b6e2ff '
            stroke_width: 5
            group_by:
              func: avg
              duration: 1day
            show:
              datalabels: false
              extremas: true

Thanks, Steffen

Could someone please tell me how to stop the chart/graph from moving side to side every time I filter the view by clicking on one of the legends? The asymmetrical aesthetic drives me insane!

(I made a chart with two Y-axis opposite to each other, one for temperature and one for humidity.)

how to create apexchart graph using attributes? e.g I want to create a round trip time line graph for 8.8.8.8 ping.
Binary sensor is binary_sensor.8_8_8_8 and attribute is Round trip time avg

Hello I need your help,the columns show a value of the cost of the Pun of energy in Italy, if I move the cursor on a column it only shows me a decimal, how can I configure so that there are also at least 6 decimals in the column?
also in the window it shows me the value in hours, I don’t know why…
see screenshot below

image

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
graph_span: 30d
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Daily PUN
yaxis:
  - min: 0.06
    max: 0.2
    decimals: 6
    apex_config:
      tickAmount: 10
series:
  - entity: sensor.pun_fascia_f1
    name: Costo
    type: column
    unit: €
    color: darkviolet
    group_by:
      func: max
      duration: 1d

Hi all,
I have to force the donut-chart to show equal segments, even is the value == 0.
I think I have to use the option: data_generator?

As you can see the little part ‘Next 40: 0’ is hardly visible.
Schermafbeelding 2024-01-04 om 23.03.40

This is a snippet of the code I use.

type: custom:apexcharts-card
experimental:
  color_threshold: true
chart_type: donut
header:
  show: true
  show_states: false
  colorize_states: false
  title: Regenklok (push to refresh location)
  title_actions:
    tap_action:
      action: call-service
      service: multiscrape.trigger_scraper_noname_0
      confirmation:
        text: Refresh data?
series:
  - entity: sensor.regenklok
    attribute: value_next_40
    name: next: 40
    color_threshold:
      - value: 0
        color: 003B67
      - value: 10
        color: E7F4FE
      - value: 20
        color: CEEAFF
      - value: 30
        color: A8DAFF
      - value: 40
        color: 8DCFFF
      - value: 50
        color: 70C2FE
      - value: 60
        color: 3EADFF
      - value: 70
        color: 199DFF
      - value: 80
        color: 0479D1
      - value: 90
        color: 0065B0
      - value: 100
        color: 003B67

I’m curious what will bring the solution.

Thanks

Hi, i wonder if it could be possible to create a nice looking classic Gauge like this:

https://www.cssscript.com/demo/canvas-based-html5-gauge-library-gauge-js/

Did anyone has already made such or is it not possible with apex?

Goodday,

I would like to get some help with the following, I have a sensor which has attributes devided per hour for the current day. Every hour has a bunch of values. I am looking for a piece of code for the apexcard so that I can display the value of the atribute “prijsBE” for every hour of the current day. Any pointers would be appricated very much.

I have tried:

    data_generator: |
      return entity.attributes.data.map((entry) => {
        return [new Date(entry.datum), entry.prijsBE];
      });

But the result of that is not the complete day but just the upcoming value it seems.
I have the:

graph_span: 1d
span:
  start: hour

raw state of the sensor sensor.stroomprijs_enever:

data:
  - datum: "2024-01-08 00:00:00"
    prijs: "0.087020"
    prijsAA: "0.258145"
    prijsAIP: "0.267194"
    prijsANWB: "0.258125"
    prijsBE: "0.257934"
    prijsEE: "0.267804"
    prijsEN: "0.259264"
    prijsEVO: "0.258125"
    prijsEZ: "0.258125"
    prijsFR: "0.262344"
    prijsGSL: "0.258125"
    prijsMDE: "0.258125"
    prijsNE: "0.259035"
    prijsTI: "0.258724"
    prijsVDB: "0.258821"
    prijsVON: "0.256909"
    prijsWE: "0.262345"
    prijsZG: "0.258125"
    prijsZP: "0.256944"
  - datum: "2024-01-08 01:00:00"
    prijs: "0.084350"
    prijsAA: "0.254914"
    prijsAIP: "0.263964"
    prijsANWB: "0.254894"
    prijsBE: "0.254704"
    prijsEE: "0.264574"
    prijsEN: "0.256034"
    prijsEVO: "0.254894"
    prijsEZ: "0.254894"
    prijsFR: "0.259114"
    prijsGSL: "0.254894"
    prijsMDE: "0.254894"
    prijsNE: "0.255804"
    prijsTI: "0.255494"
    prijsVDB: "0.255591"
    prijsVON: "0.253679"
    prijsWE: "0.259114"
    prijsZG: "0.254894"
    prijsZP: "0.253714"
  - datum: "2024-01-08 02:00:00"
    prijs: "0.081710"
    prijsAA: "0.251720"
    prijsAIP: "0.260769"
    prijsANWB: "0.251700"
    prijsBE: "0.251509"
    prijsEE: "0.261379"
    prijsEN: "0.252839"
    prijsEVO: "0.251700"
    prijsEZ: "0.251700"
    prijsFR: "0.255919"
    prijsGSL: "0.251700"
    prijsMDE: "0.251700"
    prijsNE: "0.252610"
    prijsTI: "0.252299"
    prijsVDB: "0.252396"
    prijsVON: "0.250484"
    prijsWE: "0.255919"
    prijsZG: "0.251700"
    prijsZP: "0.250519"
  - datum: "2024-01-08 03:00:00"
    prijs: "0.079000"
    prijsAA: "0.248440"
    prijsAIP: "0.257490"
    prijsANWB: "0.248421"
    prijsBE: "0.248230"
    prijsEE: "0.258100"
    prijsEN: "0.249560"
    prijsEVO: "0.248421"
    prijsEZ: "0.248421"
    prijsFR: "0.252640"
    prijsGSL: "0.248421"
    prijsMDE: "0.248421"
    prijsNE: "0.249331"
    prijsTI: "0.249020"
    prijsVDB: "0.249117"
    prijsVON: "0.247205"
    prijsWE: "0.252640"
    prijsZG: "0.248421"
    prijsZP: "0.247240"
  - datum: "2024-01-08 04:00:00"
    prijs: "0.078470"
    prijsAA: "0.247799"
    prijsAIP: "0.256849"
    prijsANWB: "0.247779"
    prijsBE: "0.247589"
    prijsEE: "0.257459"
    prijsEN: "0.248919"
    prijsEVO: "0.247779"
    prijsEZ: "0.247779"
    prijsFR: "0.251999"
    prijsGSL: "0.247779"
    prijsMDE: "0.247779"
    prijsNE: "0.248690"
    prijsTI: "0.248379"
    prijsVDB: "0.248476"
    prijsVON: "0.246564"
    prijsWE: "0.251999"
    prijsZG: "0.247779"
    prijsZP: "0.246599"
  - datum: "2024-01-08 05:00:00"
    prijs: "0.082100"
    prijsAA: "0.252191"
    prijsAIP: "0.261241"
    prijsANWB: "0.252172"
    prijsBE: "0.251981"
    prijsEE: "0.261851"
    prijsEN: "0.253311"
    prijsEVO: "0.252172"
    prijsEZ: "0.252172"
    prijsFR: "0.256391"
    prijsGSL: "0.252172"
    prijsMDE: "0.252172"
    prijsNE: "0.253082"
    prijsTI: "0.252771"
    prijsVDB: "0.252868"
    prijsVON: "0.250956"
    prijsWE: "0.256391"
    prijsZG: "0.252172"
    prijsZP: "0.250991"
  - datum: "2024-01-08 06:00:00"
    prijs: "0.094300"
    prijsAA: "0.266953"
    prijsAIP: "0.276003"
    prijsANWB: "0.266934"
    prijsBE: "0.266743"
    prijsEE: "0.276613"
    prijsEN: "0.268073"
    prijsEVO: "0.266934"
    prijsEZ: "0.266934"
    prijsFR: "0.271153"
    prijsGSL: "0.266934"
    prijsMDE: "0.266934"
    prijsNE: "0.267844"
    prijsTI: "0.267533"
    prijsVDB: "0.267630"
    prijsVON: "0.265718"
    prijsWE: "0.271153"
    prijsZG: "0.266934"
    prijsZP: "0.265753"
  - datum: "2024-01-08 07:00:00"
    prijs: "0.111090"
    prijsAA: "0.287269"
    prijsAIP: "0.296319"
    prijsANWB: "0.287249"
    prijsBE: "0.287059"
    prijsEE: "0.296929"
    prijsEN: "0.288389"
    prijsEVO: "0.287249"
    prijsEZ: "0.287249"
    prijsFR: "0.291469"
    prijsGSL: "0.287249"
    prijsMDE: "0.287249"
    prijsNE: "0.288160"
    prijsTI: "0.287849"
    prijsVDB: "0.287946"
    prijsVON: "0.286034"
    prijsWE: "0.291469"
    prijsZG: "0.287249"
    prijsZP: "0.286069"
  - datum: "2024-01-08 08:00:00"
    prijs: "0.121110"
    prijsAA: "0.299394"
    prijsAIP: "0.308443"
    prijsANWB: "0.299374"
    prijsBE: "0.299183"
    prijsEE: "0.309053"
    prijsEN: "0.300513"
    prijsEVO: "0.299374"
    prijsEZ: "0.299374"
    prijsFR: "0.303593"
    prijsGSL: "0.299374"
    prijsMDE: "0.299374"
    prijsNE: "0.300284"
    prijsTI: "0.299973"
    prijsVDB: "0.300070"
    prijsVON: "0.298158"
    prijsWE: "0.303593"
    prijsZG: "0.299374"
    prijsZP: "0.298193"
  - datum: "2024-01-08 09:00:00"
    prijs: "0.117830"
    prijsAA: "0.295425"
    prijsAIP: "0.304474"
    prijsANWB: "0.295405"
    prijsBE: "0.295214"
    prijsEE: "0.305084"
    prijsEN: "0.296544"
    prijsEVO: "0.295405"
    prijsEZ: "0.295405"
    prijsFR: "0.299624"
    prijsGSL: "0.295405"
    prijsMDE: "0.295405"
    prijsNE: "0.296315"
    prijsTI: "0.296004"
    prijsVDB: "0.296101"
    prijsVON: "0.294189"
    prijsWE: "0.299625"
    prijsZG: "0.295405"
    prijsZP: "0.294224"
  - datum: "2024-01-08 10:00:00"
    prijs: "0.110580"
    prijsAA: "0.286652"
    prijsAIP: "0.295702"
    prijsANWB: "0.286632"
    prijsBE: "0.286442"
    prijsEE: "0.296312"
    prijsEN: "0.287772"
    prijsEVO: "0.286632"
    prijsEZ: "0.286632"
    prijsFR: "0.290852"
    prijsGSL: "0.286632"
    prijsMDE: "0.286632"
    prijsNE: "0.287543"
    prijsTI: "0.287232"
    prijsVDB: "0.287329"
    prijsVON: "0.285417"
    prijsWE: "0.290852"
    prijsZG: "0.286632"
    prijsZP: "0.285452"
  - datum: "2024-01-08 11:00:00"
    prijs: "0.103000"
    prijsAA: "0.277480"
    prijsAIP: "0.286530"
    prijsANWB: "0.277461"
    prijsBE: "0.277270"
    prijsEE: "0.287140"
    prijsEN: "0.278600"
    prijsEVO: "0.277461"
    prijsEZ: "0.277461"
    prijsFR: "0.281680"
    prijsGSL: "0.277461"
    prijsMDE: "0.277461"
    prijsNE: "0.278371"
    prijsTI: "0.278060"
    prijsVDB: "0.278157"
    prijsVON: "0.276245"
    prijsWE: "0.281680"
    prijsZG: "0.277461"
    prijsZP: "0.276280"
  - datum: "2024-01-08 12:00:00"
    prijs: "0.084900"
    prijsAA: "0.255579"
    prijsAIP: "0.264629"
    prijsANWB: "0.255560"
    prijsBE: "0.255369"
    prijsEE: "0.265239"
    prijsEN: "0.256699"
    prijsEVO: "0.255560"
    prijsEZ: "0.255560"
    prijsFR: "0.259779"
    prijsGSL: "0.255560"
    prijsMDE: "0.255560"
    prijsNE: "0.256470"
    prijsTI: "0.256159"
    prijsVDB: "0.256256"
    prijsVON: "0.254344"
    prijsWE: "0.259779"
    prijsZG: "0.255560"
    prijsZP: "0.254379"
  - datum: "2024-01-08 13:00:00"
    prijs: "0.089560"
    prijsAA: "0.261218"
    prijsAIP: "0.270268"
    prijsANWB: "0.261198"
    prijsBE: "0.261008"
    prijsEE: "0.270878"
    prijsEN: "0.262338"
    prijsEVO: "0.261198"
    prijsEZ: "0.261198"
    prijsFR: "0.265418"
    prijsGSL: "0.261198"
    prijsMDE: "0.261198"
    prijsNE: "0.262108"
    prijsTI: "0.261798"
    prijsVDB: "0.261895"
    prijsVON: "0.259983"
    prijsWE: "0.265418"
    prijsZG: "0.261198"
    prijsZP: "0.260018"
  - datum: "2024-01-08 14:00:00"
    prijs: "0.100000"
    prijsAA: "0.273850"
    prijsAIP: "0.282900"
    prijsANWB: "0.273831"
    prijsBE: "0.273640"
    prijsEE: "0.283510"
    prijsEN: "0.274970"
    prijsEVO: "0.273831"
    prijsEZ: "0.273831"
    prijsFR: "0.278050"
    prijsGSL: "0.273831"
    prijsMDE: "0.273831"
    prijsNE: "0.274741"
    prijsTI: "0.274430"
    prijsVDB: "0.274527"
    prijsVON: "0.272615"
    prijsWE: "0.278050"
    prijsZG: "0.273831"
    prijsZP: "0.272650"
  - datum: "2024-01-08 15:00:00"
    prijs: "0.107980"
    prijsAA: "0.283506"
    prijsAIP: "0.292556"
    prijsANWB: "0.283486"
    prijsBE: "0.283296"
    prijsEE: "0.293166"
    prijsEN: "0.284626"
    prijsEVO: "0.283486"
    prijsEZ: "0.283486"
    prijsFR: "0.287706"
    prijsGSL: "0.283486"
    prijsMDE: "0.283486"
    prijsNE: "0.284397"
    prijsTI: "0.284086"
    prijsVDB: "0.284183"
    prijsVON: "0.282271"
    prijsWE: "0.287706"
    prijsZG: "0.283486"
    prijsZP: "0.282306"
  - datum: "2024-01-08 16:00:00"
    prijs: "0.116390"
    prijsAA: "0.293682"
    prijsAIP: "0.302732"
    prijsANWB: "0.293662"
    prijsBE: "0.293472"
    prijsEE: "0.303342"
    prijsEN: "0.294802"
    prijsEVO: "0.293662"
    prijsEZ: "0.293662"
    prijsFR: "0.297882"
    prijsGSL: "0.293662"
    prijsMDE: "0.293662"
    prijsNE: "0.294573"
    prijsTI: "0.294262"
    prijsVDB: "0.294359"
    prijsVON: "0.292447"
    prijsWE: "0.297882"
    prijsZG: "0.293662"
    prijsZP: "0.292482"
  - datum: "2024-01-08 17:00:00"
    prijs: "0.129150"
    prijsAA: "0.309122"
    prijsAIP: "0.318172"
    prijsANWB: "0.309102"
    prijsBE: "0.308912"
    prijsEE: "0.318782"
    prijsEN: "0.310242"
    prijsEVO: "0.309102"
    prijsEZ: "0.309102"
    prijsFR: "0.313322"
    prijsGSL: "0.309102"
    prijsMDE: "0.309102"
    prijsNE: "0.310012"
    prijsTI: "0.309702"
    prijsVDB: "0.309799"
    prijsVON: "0.307887"
    prijsWE: "0.313322"
    prijsZG: "0.309102"
    prijsZP: "0.307922"
  - datum: "2024-01-08 18:00:00"
    prijs: "0.125080"
    prijsAA: "0.304197"
    prijsAIP: "0.313247"
    prijsANWB: "0.304177"
    prijsBE: "0.303987"
    prijsEE: "0.313857"
    prijsEN: "0.305317"
    prijsEVO: "0.304177"
    prijsEZ: "0.304177"
    prijsFR: "0.308397"
    prijsGSL: "0.304177"
    prijsMDE: "0.304177"
    prijsNE: "0.305088"
    prijsTI: "0.304777"
    prijsVDB: "0.304874"
    prijsVON: "0.302962"
    prijsWE: "0.308397"
    prijsZG: "0.304177"
    prijsZP: "0.302997"
  - datum: "2024-01-08 19:00:00"
    prijs: "0.111900"
    prijsAA: "0.288249"
    prijsAIP: "0.297299"
    prijsANWB: "0.288230"
    prijsBE: "0.288039"
    prijsEE: "0.297909"
    prijsEN: "0.289369"
    prijsEVO: "0.288230"
    prijsEZ: "0.288230"
    prijsFR: "0.292449"
    prijsGSL: "0.288230"
    prijsMDE: "0.288230"
    prijsNE: "0.289140"
    prijsTI: "0.288829"
    prijsVDB: "0.288926"
    prijsVON: "0.287014"
    prijsWE: "0.292449"
    prijsZG: "0.288230"
    prijsZP: "0.287049"
  - datum: "2024-01-08 20:00:00"
    prijs: "0.100100"
    prijsAA: "0.273971"
    prijsAIP: "0.283021"
    prijsANWB: "0.273952"
    prijsBE: "0.273761"
    prijsEE: "0.283631"
    prijsEN: "0.275091"
    prijsEVO: "0.273952"
    prijsEZ: "0.273952"
    prijsFR: "0.278171"
    prijsGSL: "0.273952"
    prijsMDE: "0.273952"
    prijsNE: "0.274862"
    prijsTI: "0.274551"
    prijsVDB: "0.274648"
    prijsVON: "0.272736"
    prijsWE: "0.278171"
    prijsZG: "0.273952"
    prijsZP: "0.272771"
  - datum: "2024-01-08 21:00:00"
    prijs: "0.091000"
    prijsAA: "0.262960"
    prijsAIP: "0.272010"
    prijsANWB: "0.262941"
    prijsBE: "0.262750"
    prijsEE: "0.272620"
    prijsEN: "0.264080"
    prijsEVO: "0.262941"
    prijsEZ: "0.262941"
    prijsFR: "0.267160"
    prijsGSL: "0.262941"
    prijsMDE: "0.262941"
    prijsNE: "0.263851"
    prijsTI: "0.263540"
    prijsVDB: "0.263637"
    prijsVON: "0.261725"
    prijsWE: "0.267160"
    prijsZG: "0.262941"
    prijsZP: "0.261760"
  - datum: "2024-01-08 22:00:00"
    prijs: "0.092000"
    prijsAA: "0.264170"
    prijsAIP: "0.273220"
    prijsANWB: "0.264151"
    prijsBE: "0.263960"
    prijsEE: "0.273830"
    prijsEN: "0.265290"
    prijsEVO: "0.264151"
    prijsEZ: "0.264151"
    prijsFR: "0.268370"
    prijsGSL: "0.264151"
    prijsMDE: "0.264151"
    prijsNE: "0.265061"
    prijsTI: "0.264750"
    prijsVDB: "0.264847"
    prijsVON: "0.262935"
    prijsWE: "0.268370"
    prijsZG: "0.264151"
    prijsZP: "0.262970"
  - datum: "2024-01-08 23:00:00"
    prijs: "0.091490"
    prijsAA: "0.263553"
    prijsAIP: "0.272603"
    prijsANWB: "0.263533"
    prijsBE: "0.263343"
    prijsEE: "0.273213"
    prijsEN: "0.264673"
    prijsEVO: "0.263533"
    prijsEZ: "0.263533"
    prijsFR: "0.267753"
    prijsGSL: "0.263533"
    prijsMDE: "0.263533"
    prijsNE: "0.264444"
    prijsTI: "0.264133"
    prijsVDB: "0.264230"
    prijsVON: "0.262318"
    prijsWE: "0.267753"
    prijsZG: "0.263533"
    prijsZP: "0.262353"
friendly_name: Stroomprijs enever

Hi all, i’m using 4 months monthly bar chart to show 4 total increasing sensors. Problem is that a small part on the graph left is missing. I was not able to find a way to show the missing part. Can someone help me?

type: custom:apexcharts-card
all_series_config:
  stroke_width: 1
  show:
    offset_in_name: false
    legend_value: false
    extremas: false
    name_in_header: false
graph_span: 4months
span:
  end: month
apex_config:
  chart:
    type: area
    height: 250px
  legend:
    show: true
  dataLabels:
    style:
      fontSize: 11px
    background:
      enabled: true
      padding: 2
      borderRadius: 1
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.3
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
header:
  show: true
  title: Energia Severina ultimi 5 mesi
  show_states: false
  colorize_states: true
series:
  - entity: sensor.azzurro_seve_total_pv_generation
    name: Efv
    color: green
    show:
      datalabels: true
    opacity: 1
    statistics:
      type: sum
      align: start
    type: column
    group_by:
      func: diff
      start_with_last: true
      duration: 1month
    float_precision: 0
  - entity: sensor.azzurro_seve_total_load_consumption
    name: Eu
    color: orange
    show:
      datalabels: true
    opacity: 1
    statistics:
      type: sum
      align: start
    type: column
    group_by:
      func: diff
      start_with_last: true
      duration: 1month
    float_precision: 0
  - entity: sensor.azzurro_seve_total_energy_sold
    name: Eg+
    color: violet
    show:
      datalabels: true
    opacity: 1
    statistics:
      type: sum
      align: start
    type: column
    group_by:
      func: diff
      start_with_last: true
      duration: 1month
    float_precision: 0
  - entity: sensor.azzurro_seve_total_energy_bought
    name: Eg-
    color: red
    show:
      datalabels: true
    opacity: 1
    statistics:
      type: sum
      align: start
    type: column
    group_by:
      func: diff
      start_with_last: true
      duration: 1month
    float_precision: 0

image

image

Hi, i wonder if it could be possible to create a nice looking classic Gauge like this:

https://www.cssscript.com/demo/canvas-based-html5-gauge-library-gauge-js/

Did anyone has already made such or is it not possible with apex?

no one seens this?

I’ve been fiddling around with the Apexcharts-card.
So I thought I would share my config.

I really like that I got the gradient effect to work but I havnt figured it our how to do it if you have more that one series/track.

I will post about homePod temps in another thread.

WAN

type: custom:apexcharts-card
header:
  show: true
  title: WAN
  show_states: true
  colorize_states: true
chart_type: radialBar
series:
  - entity: sensor.speedtest_download
    name: download
    color: dodgerblue
    max: 100
  - entity: sensor.speedtest_ping
    name: ' '
    color: mediumseagreen
    show:
      in_chart: false
    max: 200
  - entity: sensor.speedtest_upload
    name: upload
    color: tomato
    max: 100
apex_config:
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: -108
      endAngle: 108
      hollow:
        margin: 5
        size: 65%
      dataLabels:
        name:
          show: false
        value:
          show: false
      track:
        strokeWidth: 40px
        margin: 3
        background: '#333'
  fill:
    type: gradient
    gradient:
      shade: dark
      type: horizontal
      gradientToColors:
        - mediumseagreen
      shadeIntensity: 1
      inverseColors: true
      opacityFrom: 1
      opacityTo: 1
      stops:
        - 0
        - 100
  legend:
    show: false
  chart:
    height: 230
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      background: none;
    }

Bitcoin (fear and greed index around the logo)

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.btc_priset
    show_state: true
    show_name: false
    show_icon: true
    color: orange
    icon: mdi:bitcoin
    layout: icon_name_state
    styles:
      name:
        - font-size: 40px
        - color: >
            [[[ if (entity.state < 20000) return 'tomato'; if (entity.state >=
            20000 && entity.state < 40000) return 'orange'; else return
            'lightgreen'; ]]]
    card_mod:
      style: |
        ha-card {
        background: rgba(25, 25, 25, 0);
        width: 100%;
        position: absolute !important;
        top: 0;
        left: 0;
         }
  - type: custom:apexcharts-card
    header:
      show: false
      title: Fear and Greed Index
      show_states: true
      colorize_states: true
    chart_type: radialBar
    series:
      - entity: sensor.fear_and_greed_index_value
        name: ' '
        color: mediumseagreen
        max: 100
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -108
          endAngle: 108
          hollow:
            size: 75%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 50%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: dark
          type: horizontal
          gradientToColors:
            - firebrick
          shadeIntensity: 1
          inverseColors: true
          opacityFrom: 1
          opacityTo: 1
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 250
    card_mod:
      style: |
        ha-card {
        opacity: 1;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: scale(0.5) translate(-60%,-48%);
         }
  - type: custom:mini-graph-card
    icon: mdi:bitcoin
    entities:
      - entity: sensor.cryptoinfo_btc_price
    point_per_hour: 1
    hours_to_show: 240
    points_per_hour: 1
    line_width: 1
    name: last 10 days
    cache: enable
    font_size: 75
    font_size_header: 14
    height: 150
    show:
      name: false
      icon: false
      points: false
      extrema: false
      state: false
      fill: fade
      graph: line
      legend: true
      labels: true
      labels_secondary: true
    color_thresholds:
      - value: 10000
        color: '#0010FF'
      - value: 13000
        color: '#0024FF'
      - value: 16000
        color: '#0048FF'
      - value: 19000
        color: '#166DFF'
      - value: 22000
        color: '#3882FF'
      - value: 25000
        color: '#5A97FF'
      - value: 28000
        color: '#7DACFF'
      - value: 31000
        color: '#9FC6FF'
      - value: 34000
        color: '#C1DBFF'
      - value: 37000
        color: '#E3DFFF'
      - value: 38000
        color: '#FFB0B0'
      - value: 38500
        color: '#FFC1B0'
      - value: 39000
        color: '#FFD2B0'
      - value: 39500
        color: '#FFE3B0'
      - value: 40000
        color: '#FFEFB0'
      - value: 40500
        color: '#FFF5B0'
      - value: 41000
        color: '#FFFCB0'
      - value: 41500
        color: '#F5FFB0'
      - value: 42000
        color: '#E6FFB0'
      - value: 42500
        color: '#D8FFB0'
      - value: 43000
        color: '#C9FFB0'
      - value: 43500
        color: '#BAFFB0'
      - value: 44000
        color: '#ABFFB0'
      - value: 44500
        color: '#9CFFB0'
      - value: 45000
        color: '#8DFFB0'
      - value: 45500
        color: '#7EFFB0'
      - value: 46000
        color: '#6FFFAD'
      - value: 46500
        color: '#60FFA9'
      - value: 47000
        color: '#51FFA5'
      - value: 47500
        color: '#42FFA1'
      - value: 48000
        color: '#33FF9D'
      - value: 48500
        color: '#24FF99'
      - value: 49000
        color: '#15FF95'
      - value: 49500
        color: '#06FF91'
      - value: 50000
        color: '#00FF8D'
      - value: 55000
        color: '#00EB7E'
      - value: 60000
        color: '#00D76F'
      - value: 65000
        color: '#00C260'
      - value: 70000
        color: '#00AE51'
      - value: 75000
        color: '#009A42'
      - value: 80000
        color: '#008633'
      - value: 85000
        color: '#007224'
      - value: 90000
        color: '#006C1E'
      - value: 95000
        color: '#00661E'
      - value: 100000
        color: '#00601E'
    card_mod:
      style: |
        ha-card {
        opacity: 1;
        width: 100%;
        position: absolute !important;
          bottom: 0;
          left: 0;
         }
card_mod:
  style: |
    ha-card {
      background: transparent;
      height: 240px;
      transform: translateY(50px);
    }
1 Like