ApexCharts card - A highly customizable graph card

thanks , it worked with a very high value in duration

I just wanted to say thanks! I implemented the “group_by” section of code and it works great!

image
Is there a way to reduce the offset from the edge of the card to the yaxis labels?

I want to graph/labels to cover the entire card

See this topic What is the best approach to create history_stats for the last 7 days but showed by each day seperate without enormous amounts of code? - #19 by martinst

I am using a sensor.day_night in my apex-chart, it works fine but the columns are only in the past.
Can I use the night values also for the future?
Example:
grafik

  - entity: sensor.day_night
    curve: stepline
    type: area
    transform: 'return x === ''Day'' ? 0 : 30 ;'
    color: grey
    stroke_width: 0
    opacity: 0.3
    show:
      in_header: false
      legend_value: false

1 Like

Could you please share your code for the layout you have created so far?

can someone perhaps look at my graph, there is a empty space between the two graphs
i think it is because the first value is at 1.July 06:00 and the next is at 1.July 13:00 is there a way to get it without a hole?

lastvalue_1
lastvalue_2

my code

- type: custom:apexcharts-card
                              locale: 'de' 
                              graph_span: 6d
                              span:
                                start: day
                                offset: -3d
                              header:
                                show: true
                                title: Temperatur Vohersage
                                show_states: true
                              now:
                                show: true
                                label: 'Heute'
                              apex_config:
                                legend:
                                  show: false
                                fill:
                                  type: gradient
                                  gradient:
                                    type: vertical
                                    opacityFrom: 0.8
                                    opacityTo: 0
                                    stops:
                                      - 0
                                      - 99
                                      - 100
                              series:
                                - entity: weather.openweathermap
                                  name: Temperature
                                  unit: °C
                                  type: area
                                  attribute: temperature
                                  fill_raw: last
                                  extend_to_end: false
                                  group_by:
                                    func: avg
                                    duration: 1h
                                - entity: weather.openweathermap
                                  type: area
                                  extend_to_end: false
                                  unit: °C
                                  show:
                                    in_header: false
                                  data_generator: |
                                    return entity.attributes.forecast.map((entry) => {
                                      return [new Date(entry.datetime).getTime(), entry.temperature];
                                    });
1 Like

HI,

I can’t see my Apexcharts on my iPhone using the HomeAssistant App, did you have the same issue ?

It’s ok on my PC

Thanks for your help

Seem to have issues displaying apexcharts since last update, anyone else having issues.
The cards have been fine for a long while until now.
The error message is:

/// apexcharts-card version 2.0.1 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].deflate is extraneous value.series[0].deflate is extraneous value.header is not a ChartCardHeaderExternalConfig; value.header.deflate is extraneous value.deflate is extraneous

But not sure what this means or where to look. Any help would be appreciated

no it works well on my iphone.

greets

Here the columns in my chart looks like I want them to:
image

I would however prefer to show “Effektstyring” by avg of 15min. That change make columns look like this:
image

Probably an obvious reason to this behaviour that I just don’t currently grasp…?

Code:

type: custom:apexcharts-card
config_templates: full_bredde_flere_serier_1d
update_interval: 10m
graph_span: 1d
header:
  title: Forbruk, koststyring og effektstyring 1d
yaxis:
  - id: first
    decimals: 2
  - id: second
    decimals: 1
    opposite: true
    max: 1
series:
  - entity: sensor.accumulated_consumption_current_hour
    name: Forbruk
    type: column
    opacity: 0.4
    group_by:
      func: max
      duration: 60m
    yaxis_id: first
    stroke_width: 1
  - entity: sensor.varme_agressivitet_stromstyring_inverted
    name: Koststyring nå
    type: area
    opacity: 0.2
    show:
      legend_value: true
    yaxis_id: second
    stroke_width: 1
    group_by:
      func: avg
      duration: 60m
  - entity: sensor.strom_effektbegrensning_inverted
    name: Effektstyring nå
    type: area
    opacity: 0.2
    show:
      legend_value: true
    yaxis_id: second
    stroke_width: 1
    group_by:
      func: avg
      duration: 60m

Hallo ChrZZ, sorry for late answer (not visiting every day…) My code so far for the combined two graphs (custom minigraph and history graph together), both used in custom config-template-card, with dynamic hours_to_show and title string of the graph. The indicator icon is flashing in orange color according to the state of the heat-pump or in dark shadow color if the sensor is unavailable:

still missing the history span function unfortunatelly.

type: custom:config-template-card
variables:
  obdobi: states['sensor.obdobi_mapa'].state
  nazev: >-
    'TUV teplota a provozní stav -
    '+states['input_select.sledovane_obdobi'].state
entities:
  - sensor.obdobi_mapa
card:
  type: custom:stack-in-card
  card_mod:
    style: |
      ha-card {
        overflow: visible !important;
      }
  cards:
    - type: custom:mini-graph-card
      name: ${nazev}
      icon: mdi:water-boiler
      entities:
        - entity: sensor.rvs_teplota_tuv
          name: Horní
          color: '#55e5aa'
          show_fill: false
        - entity: sensor.rvs_teplota_tuv_zadana
          name: Žádaná
          show_points: false
          color: '#508070'
        - entity: sensor.teplota_tuv
          name: Střed
          color: '#005520'
          show_state: false
          show_fill: false
        - entity: input_number.nocni_doba
          color: '#000000'
          show_line: false
          show_fill: fade
          show_points: false
          show_legend: false
          y_axis: secondary
      hours_to_show: ${obdobi}
      hour24: true
      points_per_hour: ${120 / obdobi}
      animate: true
      height: 60
      line_width: 1
      show:
        labels: true
        fill: fade
        points: hover
        extrema: false
        average: false
      card_mod:
        style: |
          ha-card .header.flex .name.flex {
            font-size: 15px;
            opacity: 1;
          }
          ha-card .header.flex .icon {
            --mdc-icon-size: 25px;
            {% if states('sensor.rvs_tuv_stav') in ['unavailable','unknown','Nezjištěno'] %}
              color: DarkSlateGrey;
              animation: blinking 1s linear alternate infinite !important;
            {% endif %}
            {% if states('sensor.rvs_tuv_stav') in ['Nabíjení aktivní', 'Push aktivní'] %}
              color: orange;
              animation: blinking 0.5s linear alternate infinite !important;
            {% endif %}
          }
          @keyframes blinking {
            0% {opacity: 0.2;}
            100% {opacity: 1;}
          }
          ha-card .states.flex .state .state__value.ellipsis {
            padding-left: 0px !important;
            margin-top: -18px;
            margin-left: -10px;
            font-size: 15px;
            font-style: bold;
            opacity: 1;
          }
          ha-card .states.flex .state .state__uom.ellipsis {
            padding-left: 0px !important;
            margin-top: -21px !important;
            margin-left: -4px !important;   
            font-size: 15px;
            font-style: bold;
            opacity: 1;
          }
          .graph__legend__item:nth-of-type(1) .ellipsis:after {
            content: ":{{states('sensor.rvs_teplota_tuv')}}°C";
          }
          .graph__legend__item:nth-of-type(2) .ellipsis:after {
            content: ":{{states('sensor.rvs_teplota_tuv_zadana')}}°C";
          }
          .graph__legend__item:nth-of-type(3) .ellipsis:after {
            content: ":{{states('sensor.teplota_tuv')}}°C";
          }
          ha-card .graph__legend {
            font-size: 12px;
          }
          ha-card .graph__legend {
            padding-left: 40px !important;
            font-size: 12px;
          }
          ha-card .graph {
            margin-top: -42px;
          }
    - type: history-graph
      entities:
        - entity: sensor.rvs_tuv_stav
          name: ' '
      hours_to_show: ${obdobi}
      hour24: true
      card_mod:
        style: |
          .content {
            padding-left: 0px !important;
            padding-right: 0px !important;
            padding-top: 0px !important;
          }
          ha-card {
            margin-top: -4px;
          }

Anybody else noticed that cards with ApexCharts crashes your HA App (Android)? I have to skip these cards when I view on my phone. Works perfectly on the desktop.

Works fine here.
HA App version 2022.6.0-full, Android 12.

The wall charger for my car is running ‘twcmanager’ and it publishes to homeassistant, however periodically the entity becomes available until the next time a charging session starts.

Is there a way that apexcharts can only draw that entity if it is available, so that the chart doesn’t break?

Hello everyone
does anybody know if there is a way to define a y-axis range around the chart values, i.e. make
max = highest value + 5%
min = lowest value - 5%
?

Idea is that if I set a fixed min and max, then the range will be either too big or too small. If I don’t set min and max, then temperatures that are pretty stable look unstable, because Apex zooms in to ±1°C.

maybe reference the document, around the min / max under yaxis options.

I could not find anything on my question. Only fixed values.
I would like to make it relative and not absolute, i.e. x %.

If I set a fixed value on a date adjustable power consumption, it will either be too big (e.g. in time periods with low power consumption) or too small (e.g. in time periods with hogh power consumption).

Hi, firstly amazing work. When downloading the CSV data, is there anyway of showing the time stamps also? all I seem to see if the data.

I have this very wife friendly graph showing energy prices for today. As the “now” line can’t be configured, is there a way to alter the color of the current hour somehow? The line is too tiny to be seen from far away.

Skjermbilde 2022-07-15 kl. 08.50

type: custom:apexcharts-card
graph_span: 24h
header:
  title: Strømpriser i dag
  show: true
span:
  start: day
layout: minimal
apex_config:
  chart:
    height: 183px
now:
  show: true
  color: yellow
series:
  - entity: sensor.nordpool_kwh_krsand_nok_2_095_0
    type: column
    color: rgba(100, 100, 100, 0.1)
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
style: |
  ha-card {
    margin-top: -8px;
    background: rgba(0,0,0,0)
    }