ApexCharts card - A highly customizable graph card

Just experimenting a bit with the ApexCharts in HA and tried to build this:

  1. Temperature Inside and Outside should share the same yaxis on the left - Day/Night is realised by a second yaxis on the right (hidden). Unfortunately Inside Temerature doesn’t seem to be on the same yaxis as Outside Temperature even if it is assigned to the same axis =(

  2. I love the color_threshold but also want to use the area option somehow. is it possible to fill the line with the threshold with a gradient while keeping the line colorful?

Code:

type: custom:apexcharts-card
graph_span: 7d
apex_config:
  legend:
    show: false
brush:
  selection_span: 3d
experimental:
  color_threshold: true
  brush: true
all_series_config:
  stroke_width: 3
header:
  show: true
  floating: false
  title: Outside vs. Inside (7d)
  show_states: true
  colorize_states: true
yaxis:
  - id: left
  - id: right
    show: false
    opposite: true
series:
  - entity: sensor.outside_temperature
    name: Outside Temperature
    yaxis_id: left
    type: line
    opacity: 1
    fill_raw: last
    color_threshold:
      - value: 0
        color: ffffff
      - value: 8
        color: '#318ce8'
      - value: 16
        color: '#bcf74f'
      - value: 24
        color: '#ff9600'
    show:
      extremas: time
      in_brush: true
  - entity: sensor.miaomiaoce_inside_temperature
    name: Inside Temperature
    yaxis_id: left
    fill_raw: last
    color: '#FFC300'
    show:
      extremas: time
      in_brush: true
  - entity: binary_sensor.night
    yaxis_id: right
    transform: 'return x === "on" ? 1 : 0;'
    stroke_width: 0
    color: black
    opacity: 0.2
    type: area
    curve: stepline
    show:
      in_header: false

tried using

fill_raw: last ?

  - entity: sensor.utomhustemperatur
    curve: smooth
    type: line
    stroke_width: 2
    name: Utomhus
    fill_raw: last
    color_threshold:
      - value: 1
        color: '#932037'
      - value: -1
        color: '#104a8e'

Nope. Haven’t tried much since I asked here though…

Hi!
Is there a way to get buttons or a slider so you can change the card range?
This is how i have it in plotly-graph card

Hi! Maybe the “brush” is something for you - see how I used it in my graph: ApexCharts card - A highly customizable graph card - #2127 by aem

https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/

like this?

    card:
      type: custom:vertical-stack-in-card
      horizontal: false
      cards:
        - type: custom:config-template-card
          entities:
            - input_number.temperature_graph_days
          card:
            type: custom:apexcharts-card
            graph_span: ${{states['input_number.temperature_graph_days'].state+'d'}}
            header:
              show: true
              title: ''
              show_states: true
              colorize_states: true
            apex_config:
              chart:
                width: 100%
                height: 120%
              legend:
                show: false
            all_series_config:
              stroke_width: 2
              opacity: 0.1
              curve: smooth
              type: area
              show:
                extremas: true
            yaxis:
              - id: temperature
                show: true
                apex_config:
                  forceNiceScale: true
                  tickAmount: 6
                  decimalsInFloat: 1
              - id: humidity
                show: true
                opposite: true
                apex_config:
                  forceNiceScale: true
                  tickAmount: 6
                  decimalsInFloat: 0
            series:
              - entity: sensor.kamer_1_temperature
                name: Temperatuur
                yaxis_id: temperature
                unit: °C
                group_by:
                  func: avg
              - entity: sensor.kamer_1_humidity
                name: Luchtvochtigheid
                yaxis_id: humidity
                unit: '%'
                group_by:
                  func: avg
                color: '#607d8b'
        - type: entities
          show_header_toggle: false
          entities:
            - entity: input_number.temperature_graph_days
              type: custom:numberbox-card
              icon: mdi:chart-bell-curve
              unit: Dgn
4 Likes

Great idea. Is there a way how to add multiple annotations … e.g. every midnight?

1 Like

@RomRider or anyone else, is there a way to customize the font size and/or color or the background of the extremas shown values (min/max values)? If I change the fonts of the other datalabels, the changes are not reflected in the extremas too and they seem a little bit off. Thanks in advance.

And here’s my version. Only possible due to your posting. Many thanks and to https://community.home-assistant.io/u/romrider for producing such a card in the first place.

2 Likes

I have a json that has contains my energy usage for each month. It is formatted like:

[
   {
      "CONSUMPTION_DELTA_KWH": 73.28300000000135,
      "CONSUMPTION_GAS_DELTA_M3": 15.736000000000104,
      "CONSUMPTION_GAS_M3": 1749.255,
      "CONSUMPTION_KWH_HIGH": 3458.681,
      "CONSUMPTION_KWH_LOW": 4372.907,
      "PRODUCTION_DELTA_KWH": 2.510000000000218,
      "PRODUCTION_KWH_HIGH": 4725.154,
      "PRODUCTION_KWH_LOW": 1968.589,
      "TIMESTAMP_UTC": 1672527600,
      "TIMESTAMP_lOCAL": "2023-01-01 00:00:00"
   },
   {
      "CONSUMPTION_DELTA_KWH": 289.6369999999947,
      "CONSUMPTION_GAS_DELTA_M3": 125.817,
      "CONSUMPTION_GAS_M3": 1733.519,
      "CONSUMPTION_KWH_HIGH": 3412.274,
      "CONSUMPTION_KWH_LOW": 4345.865,
      "PRODUCTION_DELTA_KWH": 12.928000000000011,
      "PRODUCTION_KWH_HIGH": 4723.441,
      "PRODUCTION_KWH_LOW": 1967.792,
      "TIMESTAMP_UTC": 1669849200,
      "TIMESTAMP_lOCAL": "2022-12-01 00:00:00"
   }
]

How can I put this in an ApexChart, without creating a sensor for every single month?

Hey!

Does anyone know a way to display an “input_number” sensor in the name of an apex card?

Something like this (dosen’t work tho)

type: custom:apexcharts-card
header:
  show: true
  title: Elpris + Drifttid VVB [[input.boolean_sensor_name]]

Thanks!

This does !!

type: custom:config-template-card
entities:
  - counter.graph_de_bilt_temp_hour_counter
  - input_number.max_temp_today
card:
  type: custom:apexcharts-card
  graph_span: ${{states['counter.graph_de_bilt_temp_hour_counter'].state+'h'}}
  cache: false
  span:
    end: minute
  header:
    show: true
    title: ${{'Schiphol '+states['input_number.max_temp_today'].state+' °C'}}
  series:
  ..........

Works perfect! Thank you so much!! :smiling_face_with_three_hearts:

Hi Everyone,

I have all my energy consumption seperated by appilance. Each appliance has three sensors: off-peak,on-peak and solar consumption. Is it possible to create a graph like this? Or should I start looking at Grafana

Not sure if this has an example of what you want (Utility Meter near the bottom).

We can stack the utility meter data, for a daily per device overview spanning 14 days. When hovered it will give us exact data of each appliance monitor in our example along with the correct day.

Hi!

I’m using ApexCharts to display my Tyres Pressure/Temp with a radial bar inside a picture-elements cards.

The problem I’m seeing is that they keep sliding up and down - I don’t know based on what/why, not the values being shown as I tried manually setting the state of such sensors and was not able to reproduce the issue. See below some examples:

This is the correct visualisation:

both left charts moved up after a while:

this happens to all four of the ApexCharts shown, after some time they get back to the original position. Without (apparently) doing anything.

This is running on an Android based car head unit, I’m using HA Android app in Kiosk mode. Note that the other elements inside the card are not affected - only the ApexChars keep moving up and down.

Here is my code:

type: picture-elements
elements:
  - type: custom:apexcharts-card
    experimental:
      color_threshold: true
    style: |
      ha-card {
        background-color: transparent;
        font-size: 25px;
        transform: translate(128.5%,-58%) scale(0.6,1.35);
      }
    header:
      show_states: true
      show: true
      title: ''
    chart_type: radialBar
    series:
      - entity: sensor.tpms_ant_dx_pressure
        name: ANT
        unit: B
        min: 0
        max: 10
        color_threshold:
          - value: 0
            color: red
          - value: 30
            color: green
          - value: 70
            color: red
      - entity: sensor.tpms_ant_dx_temperature
        name: ANT
        unit: °
        min: 0
        max: 100
        color_threshold:
          - value: 0
            color: red
          - value: 20
            color: green
          - value: 80
            color: red
    apex_config:
      responsive:
        - breakpoint: 100
          options:
            chart:
              height: 250px
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -90
          endAngle: 90
          hollow:
            margin: 5
            size: 30%
            background: transparent
        dataLabels:
          name:
            show: false
          value:
            show: false
      legend:
        show: false
  - type: custom:apexcharts-card
    experimental:
      color_threshold: true
    style: |
      ha-card {
        background-color: transparent;
        font-size: 17px;
        transform: translate(51%,-58%) scale(0.94,1.45);
      }
    header:
      show_states: true
      show: true
      title: ''
    chart_type: radialBar
    series:
      - entity: sensor.tpms_post_dx_est_pressure
        name: EST
        unit: B
        min: 0
        max: 10
        color_threshold:
          - value: 0
            color: red
          - value: 30
            color: green
          - value: 70
            color: red
      - entity: sensor.tpms_post_dx_int_pressure
        name: INT
        unit: B
        min: 0
        max: 10
        color_threshold:
          - value: 0
            color: red
          - value: 30
            color: green
          - value: 70
            color: red
      - entity: sensor.tpms_post_dx_est_temperature
        name: EST
        unit: °
        min: 0
        max: 100
        color_threshold:
          - value: 0
            color: red
          - value: 20
            color: green
          - value: 80
            color: red
      - entity: sensor.tpms_post_dx_int_temperature
        name: INT
        unit: °
        min: 0
        max: 100
        color_threshold:
          - value: 0
            color: red
          - value: 20
            color: green
          - value: 80
            color: red
    apex_config:
      responsive:
        - breakpoint: 100
          options:
            chart:
              height: 200px
        - breakpoint: 10000
          options:
            chart:
              height: auto
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -90
          endAngle: 90
          hollow:
            margin: 5
            size: 1%
            background: transparent
        dataLabels:
          name:
            show: false
          value:
            show: false
      legend:
        show: false
  - type: state-icon
    entity: binary_sensor.gav_ant_pass
    icon: mdi:check-circle
    style:
      top: 78%
      left: 83%
      state_color: true
  - type: state-icon
    entity: binary_sensor.porta_ingr
    icon: mdi:check-circle
    style:
      top: 50%
      left: 76%
      state_color: true
  - type: state-icon
    entity: binary_sensor.gav_elettr
    icon: mdi:check-circle
    style:
      top: 76%
      left: 68%
      state_color: true
  - type: state-icon
    entity: binary_sensor.garage_pass
    icon: mdi:check-circle
    style:
      top: 72%
      left: 49%
      state_color: true
image: /local/cright3.png

Note that I’m using card-mod for styling as I wanted to use bigger sized fonts - however the same behaviour happen also when using standard styling.

Can anyone help me understand why this is happening?

Thanks a lot!

I don’t know anything about java, so I don’t know if this is possible:
But I have different day and night cost. Is this possible to add and “if” statement to the output map?

    data_generator: >
      var output =
      entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
      return output.map((entry) => { return [new Date(entry.start),
      entry.value - entry.value + 0.0175 + 0.305 + 0.45]});

So like this:

return output.map((entry) => { return [new Date(entry.start), entry.value - entry.value +
(
  If (entry.start >= 06:00 && entry.start < 23:00)
    (hass.states['input_number.day'].state)
  else
    (hass.states['input_number.night'].state)
)

Or can anybody show this can be done?

Close. I want the x axis to be populated with 7 unique entities, not 7 days like it is in the time series. Looks like it this feature was only recently added in Grafana, so I doubt it’s possible with ApexCharts yet.

Hi!
I use Apexchart for the Nordpool integration. That works great. I want be able to add a line for the average price. Is that possible? How? I have painted the line in this pic:

@Fanan: Im not sure, but have you tested to add another sensor grouping the price data by day/month?