ApexCharts card - A highly customizable graph card

samourai47 · August 28, 2023, 8:42am

Hello
I have a question and need some help
I install this card and it works fine
Capture d'écran 2023-08-25 180724
But i prefer have Line graph for 7 or 14 days, only for the Percent from Heures creuses an Heures pleines, not for the total

For example in the graph here, 24% and 76% for today. this value are modifed all the day and the day -1 the value is fixed for the %
Do you think is it possible, or i must created one or more template?

Thank’s for the help
The code used

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Répartition énergétique du jour
  show_states: true
  colorize_states: true
update_interval: 1h
span:
  end: day
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 w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " Wh"
                }
series:
  - entity: sensor.zlinky_metering_hc
    name: Heures creuses
    float_precision: 1
    color: '#5A6FE7'
    group_by:
      duration: 1d
      func: diff
  - entity: sensor.zlinky_metering_hp
    name: Heures pleines
    float_precision: 1
    color: '#EA4234'
    group_by:
      duration: 1d
      func: diff

Somethings like that… ???
https://stackoverflow.com/questions/67228705/apexcharts-js-line-chart-display-percent-from-total-in-tooltip

tuna · August 31, 2023, 2:04am

Hi
I don’t think this is possible, but I would like to show a graph using a graph_span that is the entire history of the sensor.

For example, if the sensor first logged data 8 months ago, I want the graph to start at 8 months ago to present day, and have this continue to scale and increase the span of the x axis as time goes on.

I can’t seem to find information on time strings that are relative like this. Is it possible?

i.e.

type: custom:apexcharts-card
header:
  show: true
  title: example
  show_states: true
  colorize_states: false
  standard_format: false
graph_span: 1y
series:
  - entity: sensor.sensor_example
    type: line
    group_by:
      func: avg
      duration: 1h

obviously shows the full year in the x axis, but if the sensor in question only has 2-3 weeks of data it looks super odd and crammed up against the right side of the graph.

vingerha · August 31, 2023, 5:56am

HA History has a limited range to aviod the db growing out of reasonable scope. For long(er) term data you’d have to use statistics. If your sensor has statistics then you can use the apex chart option for that
RomRider/apexcharts-card: A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant (github.com)

You can also create statistics for your sensor, look at the HA docs
Statistics - Home Assistant (home-assistant.io)

Sebu · August 31, 2023, 6:08pm

Calculation of cost per kWh

I have two entities: sensor.total_energy_daily_electricity_cost and sensor.total_energy_daily_electricity_kwh. In one’s attributes I have the total cost per day and in the others’ attributes I have the total energy.

Is it possible to create a chart in Apex to show the cost per kwh per day, so I would need to be able to divide the values from two different entities’ attributes.

tuna · August 31, 2023, 11:06pm

excellent, thanks! I will have a play
It’s a manual measurement so even with 2 years of measurements it’s unlikely to get >100 data points, didn’t anticipate DB issues

vingerha · September 1, 2023, 8:09am

Manual will also end up in ‘history’ unless you make it statistics, HA does not check the number of rows…history will be purged along the HA settings (default 10days) and it is not at all recommended to increase that…statistics is the way to go imo

YorkshiremanJim · September 1, 2023, 12:34pm

Is there a way to combine entities on a chart?

For example I have one tracking my Spotify and Plex usage, but it would be nice if I could include two entities added together as there’s two TV’s with different ID’s.

Elenkhos · September 2, 2023, 1:54pm

How to adjust the bar span only to the right of a data point?

Hourly prices are now off from the data point by a considerable amount (30 min) which is clearly visible in the chart and shows wrong price for half of the time period.

(Couldn’t find a solution with search.)

Marco_Lupieri · September 2, 2023, 5:13pm

It’s possible to have a yaml code for this day length chart?

parautenbach · September 2, 2023, 5:22pm

It’s in that post, right below the image.

Marco_Lupieri · September 2, 2023, 5:29pm

I copy the code, but no working. For the day length chart only the code posted?

parautenbach · September 2, 2023, 5:45pm

I added the series to my original post, but it won’t work unless you have that sensor or colour variable defined. Override it with your own.

Next time, instead of just saying “not working”, provide the error.

oli3000 · September 2, 2023, 8:18pm

I may have found a bug in apex-charts or something is not quite right. So I have a monthly utility sensor used to capture energy usage from a smart plug. And then I use apex-charts to plot that monthly usage.

But if I use the color option under series, the data from July is not shown in the chart.

I have created a new thread if anyone can shed some light what is happening. Adding a color to the apex chart series removes the previous months data from monthly utility sensor

JR-Y · September 4, 2023, 5:15am

Hello,

I have this simple electricity market price card, and it has price values for today and updates later also for tomorrows prices, I was able to get that dotted line to show current time, but I don’t find a way to show that value above, instead the number above is always the last number of the array of prices.
Is it possible to define somehow what is the “now” value?

type: custom:apexcharts-card
header:
  show: true
  title: Pörssihinnat
  show_states: true
  colorize_states: true
now:
  show: true
graph_span: 2d
span:
  start: day
series:
  - entity: sensor.shf_electricity_price_now
    type: column
    float_precision: 2
    data_generator: |
      return entity.attributes.data
      .sort((a,b)=>{return a.DateTime-b.DateTime})
      .map((record, index) =>
      {return [record.DateTime, record.PriceWithTax]});
yaxis:
  - decimals: 2

bazcurtis · September 4, 2023, 4:39pm

I have a donut chart that reports my daily energy profit and loss. Once is goes it minus it will no longer appear in the donut. Can I change that?

Strip · September 5, 2023, 7:06am

I really have no idea what I’m doing, but here goes nothing!

I’ve added a second series to my graph:

  - entity: sensor.nordpool_kwh_se3_sek_3_10_025
    name: 'Now'
    show:
      in_chart: false
      in_header: true
      legend_value: false

… and hidden the first series with:

    show:
      in_header: false

… resulting in something like this:

Cronix · September 6, 2023, 3:49pm

Provide a “label” for “now”: GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant

JR-Y · September 6, 2023, 6:38pm

This worked, thanks

Marco_Lupieri · September 7, 2023, 11:48am

Hi, I have a sensor that shows me the electricity consumption of the previous day every day. The sensor changes value every night at 00:30 Is it possible to take this value of the sensor every day at noon to create a graph of monthly consumption?

bmorgenthaler · September 7, 2023, 3:30pm

Question on color_threshold and days shown. My chart looks good for 5 days but as soon as I go to 6days I have a red (high threshold) line showing across the whole range even though it shouldn’t.

5 Day Screenshot

6 Day Screenshot