ApexCharts card - A highly customizable graph card

[Chaoscontrol]

Is it possible to achieve a combo chart like this in Apex?

I currently have several area series, but would like to add a sensor that has boolean values (On/Off), and would love to display it as an area under the other lines.

Alternatively, if that’s not doable as the Y is dependent on other series, just to have a flat area showing how long heating has been on.

I’ve tried adding the entity as another area series, but it doesn’t seem to work.

card:
  type: custom:apexcharts-card
  header:
    show: true
    show_states: true
    colorize_states: false
    floating: true
  all_series_config:
    show:
      in_header: false
    stroke_width: 2
    type: area
    fill_raw: last
    opacity: 0.1
    extend_to: now
    group_by:
      func: avg
      duration: 30min
  graph_span: 24h
  span:
    start: day
  now:
    show: true
  apex_config:
    legend:
      position: top
      horizontalAlign: right
    grid:
      show: false
    yaxis:
      min: 14
      forceNiceScale: true
      tickAmount: 5
    annotations:
      yaxis:
        - "y": 21
          borderColor: "#fff"
          label:
            style:
              color: "#fff"
              background: "#00E396"
            text: Target 21C
  series:
    - entity: sensor.wiser_lts_temperature_living_room
      name: Living room
    - entity: sensor.wiser_lts_temperature_main_bedroom
      name: Bedroom
    - entity: sensor.wiser_lts_temperature_guest_bedroom
      name: Guests
    - entity: sensor.wiser_lts_temperature_kitchen
      name: Kitchen
    - entity: sensor.weather_station_temperature
      name: Bathroom
    - entity: sensor.outside_temperature
      name: Outside
      show:
        in_header: true
        in_chart: false
    - entity: sensor.wiser_boiler
      name: Boiler
    - entity: sensor.wiser_heating
      name: Heating

[mfroger (Mick)]

Hi,

I have 12 sensors with numeric values ​​in them corresponding to 12 months of data.
I want to make a graph line with the values ​​of each month.
I tried this:

type: custom:apexcharts-card
header:
  show: true
  title: Évolution
  show_states: true
  colorize_states: true
series:
  - entity: sensor.evolution_month_01
    data_generator: |
      const data = [];
      const now = new Date();
      const monthNames = ["Janv.", "Fév.", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Sept.", "Oct.", "Nov.", "Déc."];
      
      for (let i = 0; i < monthNames.length; i++) {
        const monthData = states['sensor.evolution_month_' + (i + 1)];

        const value = monthData && monthData.state ? parseFloat(monthData.state) : 0;
        const timestamp = new Date(now.getFullYear(), i, 1).getTime();
        data.push([timestamp, value]);
      }
      return data;

But the graph does not load, it remains “loading”.
Each sensor has a numeric value in it. Anyone have an idea?

[chazin]

Hello there,
I have 3 thermometers in my house that I would like to chart as 3 columns showing their current state. Since the entitys are refreshing their values at different times I cannot fix the graph_span to a fitting timewindow.
What would be the best way to show just 3 columns - one per entity - containing only the latest values?
I thought the series option ‘attribute’ would do the trick but cannot get any data from it.

My Entity looks like this:

series Options
Name	Type	Default	Since	Description
✅ entity	string		v1.0.0	The entity_id of the sensor to display
attribute	string		v1.4.0	Instead of retrieving the state, it will retrieve an attribute of the entity. Make sure you increase update_delay if the chart doesn't reflect the last value of the attribute

My yaml looks like this (not working right now):

type: custom:apexcharts-card
graph_span: 1h
layout: minimal
chart_type: line
series:
  - entity: sensor.thermometer_temperatur
    type: column
    attribute: state
  - entity: sensor.thermometer_vorlauf_fusbodenheizung_temperature
    type: column
    attribute: state
  - entity: sensor.thermostat_ausen_temperature
    type: column
    attribute: state

Is there an easy option doing this or do I have to fiddle around with some complicated data generator js?

[nicopret (Nico Pretorius)]

Thank you for a fantastic card @RomRider.

Is there a way to use a leading currency symbol in the header rather than the trailing currency code?

I’ve managed to do it for the Total displayed in the centre of the donut chart with the formatter, but have not been able to find a way to do it for the values displayed in the header.

type: custom:apexcharts-card
chart_type: donut
apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return "R" + w.globals.seriesTotals.reduce((a, b) => {
                  return a + b;
                }, 0).toLocaleString('en-ZA', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).replace(/\s/g, ',');
              }
header:
  title: Costs with EMS - Month-to-Date (from 1 Sep)
  floating: false
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
series:
  - entity: sensor.standard_total_cost_import
    name: Standard
    float_precision: 0
    show:
      in_header: true
      datalabels: percent
      legend_value: false
  - entity: sensor.off_peak_total_cost_import
    name: Off-peak
    float_precision: 0
    show:
      in_header: true
      datalabels: percent
      legend_value: false
  - entity: sensor.peak_total_cost_import
    name: Peak
    float_precision: 0
    show:
      in_header: true
      datalabels: percent
      legend_value: false
  - entity: sensor.total_cost_import
    name: Total
    float_precision: 0
    unit: ""
    show:
      in_header: true
      in_chart: false
      datalabels: true

[hutchet]

Hi bro, i use forecast solar. But line of pv forecast not show. My entity : sensor.energy_production_today ( kWh)

[typxxi (wolf)]

@vingerha

apex_config:
  xaxis:
    axisborder:
      show: false
    axisTicks:
      show: false
    labels:
      show: false

I am wondering where you have found this part cause I can not find that here in the documentation. I have searched for xaxis and found nothing at all.

Looks like that there is something more available and I am missing some features too like the font color in general which looks like greyish and I need black for family members with a limited vision that can nor see these kinds of grey even on big screens, I mean really big 50 inch monitors.

Therefore I am looking for some enhancements to make their life easier like here a navigation bar with colours that they had chosen for higher contrast and readability.
So far icon size and font size can not be changed.

This solution has been provided by the famous @Ildar_Gabdullin and makes their life with HA a lot easier. Again: those colors are their own choices which other might not like but with 1 eye left the world looks different and they can decide the best what works for them or not.

[vingerha]

@typxxi

I am wondering where you have found this part

The HA version does mention that it can use the javascript lib. In some cases it works, not all and you need to be able to ‘translate’ to yaml
Installation & Getting Started – ApexCharts.js

[typxxi (wolf)]

So I guess you had found there the axis description
and then inside that whole long description this

  axisBorder: {
      show: true,
      color: '#78909C',
      height: 1,
      width: '100%',
      offsetX: 0,
      offsetY: 0
  },

and you knew from the beginning that it must be part of the apex_config: section

apex_config:
  xaxis:
    axisborder:
      show: false
    axisTicks:
      show: false
    labels:
      show: false

and then you tried, right ?

For example this is a bit below you axisborder section and handles the axis title

      title: {
          text: undefined,
          offsetX: 0,
          offsetY: 0,
          style: {
              color: undefined,
              fontSize: '12px',
              fontFamily: 'Helvetica, Arial, sans-serif',
              fontWeight: 600,
              cssClass: 'apexcharts-xaxis-title',
          },

so I shoudl try to increase the font size this

apex_config:
  xaxis:
     title: 
       text: Test
       show: true
       style:
          color: blue
          fontSize: '12px'

And guess what ?

it really worked from the beginning.

Only issue for me how do I found out the objects which here is the chart title.

But what about the x-axis values / description like in this case “16. Okt.”
Is that a label ?

[vingerha]

@typxxi

But what about the x-axis values / description like in this case “16. Okt.”
Is that a label ?

Trial and error… unless someone else knows about it

[vingerha]

@typxxi

and you knew from the beginning

in the docs

[typxxi (wolf)]

I tried the label thing to get the x-axis values black and bold and bigger
and that worked out again - here is a full feature set of the label thing

apex_config:
  xaxis:
    labels:
      show: true
      rotate: -45
      rotateAlways: false
      hideOverlappingLabels: true
      showDuplicates: false
      trim: false
      minHeight: undefined
      maxHeight: 120
      style:
        colors: black
        fontSize: 16px
        fontFamily: Helvetica, Arial, sans-serif
        fontWeight: bold
        cssClass: apexcharts-xaxis-label

And that makes a hug difference for my family, the readability of the figures and words .
lot of work I guess to fix it across all my apex charts on both axis and the legend, but it offers a lot of opportunities

@vingerha big thank you % what we needed

[segi (Tomáš)]

Hello, is it possible to make average of measurement during each hours in day for last week or month or defined days?
For example: I’m interested in graph where is average temperature from 0 to 24 of last week. In 1:00 is average temperature of 7 days at 1:00.
Is it possible to do this in ApexCharts?
Can I combine it with normal day chart to compare trend today temperature?

[Aviatorpaal (Paal Andreas)]

Why do I get so many decimals, even after requesting 0 decimals on the Y axis?

ApexCharts card

type: custom:apexcharts-card
header:
  title: Strømpris og forbruk
  show: true
graph_span: 2d
span:
  start: day
apex_config:
  dataLabels:
    enabled: false
  stroke:
    width: 3
  chart:
    height: 500px
  fill:
    type: gradient
    gradient:
      shadeIntensity: 1
      inverseColors: true
      opacityFrom: 0.45
      opacityTo: 0.05
      stops:
        - 20
        - 100
        - 100
        - 100
  yaxis:
    - id: oere
      min: 0
      decimals: 0
    - id: W
      decimals: 0
      opposite: true
      min: 0
series:
  - entity: sensor.nordpool_kwh_no4_nok_3_10_025
    name: I dag
    type: area
    extend_to: now
    yaxis_id: oere
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.nordpool_kwh_no4_nok_3_10_025
    name: I morgen
    type: area
    color: blue
    extend_to: now
    yaxis_id: oere
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.power_myhome
    show:
      legend_value: false
      extremas: true
    stroke_width: 3
    curve: smooth
    color: "#949494"
    opacity: 0.2
    yaxis_id: W
    extend_to: now
    type: area
    group_by:
      func: avg
      duration: 30min
    name: Strømforbruk
now:
  show: true
type: custom:apexcharts-card
header:
  title: Strømpris og forbruk
  show: true
graph_span: 2d
span:
  start: day
apex_config:
  dataLabels:
    enabled: false
  stroke:
    width: 3
  chart:
    height: 500px
  fill:
    type: gradient
    gradient:
      shadeIntensity: 1
      inverseColors: true
      opacityFrom: 0.45
      opacityTo: 0.05
      stops:
        - 20
        - 100
        - 100
        - 100
  yaxis:
    - id: oere
      min: 0
      decimals: 0
    - id: W
      decimals: 0
      opposite: true
      min: 0
series:
  - entity: sensor.nordpool_kwh_no4_nok_3_10_025
    name: I dag
    type: area
    extend_to: now
    yaxis_id: oere
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.nordpool_kwh_no4_nok_3_10_025
    name: I morgen
    type: area
    color: blue
    extend_to: now
    yaxis_id: oere
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.power_myhome
    show:
      legend_value: false
      extremas: true
    stroke_width: 3
    curve: smooth
    color: "#949494"
    opacity: 0.2
    yaxis_id: W
    extend_to: now
    type: area
    group_by:
      func: avg
      duration: 30min
    name: Strømforbruk
now:
  show: true

[vingerha]

Move your yaxis section out of apex_config, 2 to the left

[OiD-W]

I’m still trying to wrap my head around yaml…
The data_generator is just beyond me…

I’m trying to get a trend line of a sensor (battery voltage, temperature, water consumption…)

For example, I have a derivative of a temperature sensor and I’d like to see what the temperature will be in 1h with a 2ºC/h change.
I guess all I’d need is a key pair with the current time+1h and in this case just add 2ºC to the current temp…
How would i do that?

return entity.attributes.something.map((entry) => {
  return [new Date(from current+1h), entry.value+2ºC];
});

Sorry, I really have no idea where to get the data from and even less how to feed it back!
Thanks for any tips!!

[vingerha]

Add an offset of 1h and transform: “return x + 2;”

[OiD-W]

Hi vingerha,

Thanks, the problem is I have no idea how to return these values. So far this is what I have and it will not show anything except “Loading…”

series:
  - entity: sensor.jbd_bms_uart_total_voltage
    name: ESU voltage
    color: ROYALBLUE
    type: line
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.value.map((entry) => {
        return [new Date().getTime()+30m, entry.sensor.derivativetest];
      });

Is the “return.entity.attributes.value.map” correct? What is this from?
How do I get the current time so I can add +1h to it?
I’m just putting things and seeing if it changes anything hahahaha.

Thanks

[vingerha]

I have no clue how your sensor looks like and the data_generator (unless you embark on something very special) takes the value from the series, not sure why you want two sensors in one series
EDIT: why not take just the derivative as series and add offset, transform to it?

[OiD-W]

I have no idea how to do that!

I’m finally getting a graph with the data_generator and I now understand the JavaScript get time function. I still have no idea how to get a sensor data on the graph. I’ve tried raw numeral sensors too, no C, V, W or % endings, just a pure number and still no idea.

    data_generator: |
      return [[(new Date().getTime())-(60*60000),500], [(new Date().getTime())-(30*60000),500], [(new Date().getTime()),0], [(new Date().getTime())+(30*60000),500], [(new Date().getTime())+(60*60000),500]];

Basically I’m trying to get something like this:

Graphing a trendline into the future

Hi all. I’m trying to think of a practical way to predict a future value based on the average of accrued values and then forward forecast this into the future and show that trendline on a graph. As an example here is a simple graph created in a few minutes in Excel showing my Solar feed-in to the grid in $$. The graph can tell me for example that at the current rate, by day 90 (biling day), I should have accrued approximatley $375 of credit. As each day adds data, so the rolling average chan…

[vingerha]

As long as it works, but you have (!) to understand that without details, you get littl ehelp, I (at least) cannot guess what you have as a source, and you continue to not send that…for me this ends, maybe someone else can chime in