The style attribute is apparently not recognized by the card. The following config returns a value.style is extraneous error:

  - type: 'custom:apexcharts-card'
    graph_span: 8d
    span:
      start: hour
    series:
      - entity: weather.openweathermap
        data_generator: |
          return.entity.attributes.datetime.map((time, index) => {
            return [new Date(time), entity.attributes.precipitation[index]];
          });
    style:
      left: 50%
      top: 65%
      width: 90%

Checklist

• I am running the latest version of the card
• I checked if there isn't another feature request opened with the same request
• I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.

If group_by is enabled – currently value displayed in the header is last one from grouping values.

Describe the solution you'd like

It should display latest raw value.

Describe alternatives you've considered

Cannot imagine any.

Additional context

None.

I would like share the config to get a "mini-graph-card" like graph theme.

apex_config:
  chart:
    height: 130%
  stroke:
    width: 3
  fill:
    type: solid
    opacity: 0.2

Using group_by, with max function, duration 1 day and graph_span 7 days I can display series along 7 days grouped by day by day.

Anyway I cannot got the current day data, I missing something?

Thanks

Not sure now... Just did an empty cache/hard reload and now I see no errors....

I am a huge fan of your apexchart-card and I want to switch all my old standard gauges and graphs over to your implementation.

So far I succeeded with most of the cards but I am struggling with building a gauge for anything other than percentages.

For percentages they look perfectly fine:

But when it comes to gauges for temperatures they are not so handy because of the forced 'percentage sign' after the value.

I found out, that you can change the unit in the radialBar apex options:
dataLabels -> values -> formatter
But it only accepts javascript which is quite difficult to add there (at least for me)

Maybe you can implement the 'unit' keyword in the yaml so we can specify the unit in there.
This would make the gauges so much more useful :-)

Thanks in advance and keep up the good work!

I have HACS 1.10.1 installed in HA-Docker 2021.1.5
This card isn't anywhere to be found.
Please help ?

There already is an option to hide the value of a serie in the legend, but it would be nice to completely hide it (so the serie is visible in the chart, but not in the legend). I could use this since I have a 0-value sensor to emphasize the 0 value on the y-axis.

For a 0-value, I could use the following:

legend:
  showForZeroSeries: false

But for any other fixed sensor that would not work

I'm not sure if this a February related issue or what, trying to chart current day starting at midnight, -1 month starting at midnight, -2 months starting at midnight.

In the attached picture, the graph for -1 month is appears to be using the time the chart was executed as the x-axis origin, the current day and -2 months charts appear to correctly start x-axis at midnight.

1st picture: problem as generated by yaml below
2nd picture: correct plot for -1 month data in matplotlib
3rd picture: chrome javascript console

attached zip file, full data set for 3 months, more than you need ;-)

Thanks for your help and great work!

# test 13
title: T13 Multiple Bar History
panel: true
cards:
- type: vertical-stack
  cards:



  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.backyard_atc_mi_temperature
      color: blue
      # offset: -1month
      type: line
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
    cache: true
    apex_config:
      chart:
        height: 400
      title:
        text: 'Backyard Temperature Current'

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.backyard_atc_mi_temperature
      color: blue
      offset: -1month
      type: line
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
    cache: true
    apex_config:
      chart:
        height: 400
      title:
        text: 'Backyard Temperature -1month'

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.backyard_atc_mi_temperature
      color: blue
      offset: -2month
      type: line
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
    cache: true
    apex_config:
      chart:
        height: 400
      title:
        text: 'Backyard Temperature -2month'

apexcharts version:

user@ubuntu-macmini2012:~/homeassistant/www/custom-lovelace/apexcharts$ grep -o -P '.{0,20}1\.5\..{0,20}' apexcharts-card.js
-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c
-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</sv
ate,i.card_version="1.5.0",0!==i.data.length
hSpan,card_version:"1.5.0",last_fetched:new
pan:0,card_version:"1.5.0",last_fetched:new
APEXCHARTS-CARD %c v1.5.0 ","color: orange;
th("-raw")?t:ae(t);"1.5.0"!==i.card_version&

atc-mi-backyard.csv.zip

Chrome on MacOS did not seem to detect the change with either a 'refresh' in HA UI or a page reload. I had to clear the cache in Chrome.

FYI.

There is a hard limit on 1 decimal behind the dot now, in a lot of cases 2 decimals are very useful to have, for example if you graph costs: $10,00 instead of $10.0

would be great to have a option to configure this.
for example:
0,1,2 or so same concet as this:

yaxis:
decimalsInFloat: 0

Would it be possible to add an option to show the current time as a bar or thin line in a chart? I may be useful when you have time series spanning past and current times, i.e span.end is in the future. Maybe as a global/main option where you can specify the width and color?

Thanks for this very good extension, one feature could be insterested
In case, we have a value that is calculate by the adding of two, have the detail could be interessed like this

Hello,
First of all, thank you, because this card is just awesome !!!!

Now, I would like to be able to do something like that:

Meaning, by default (when opening screen), to be able to choose which of the series are toggled on (Extérieur and Garage in the image above) and which of the series are toggled off (Salon in the image above).

I found a way to completely hide a series (which I don't understand because then, why add it in the first place ?) but not to do this.
Did I miss this possibility in the docs ? If no, do you know if this could be implemented ?
Thanks !!

This is probably only a problem for 'stuck in mud' folks like me that do things on command line. However, what is best practice to check the version of apexcharts-card that is downloaded to HA server and running in current browser?

I currently use a combo of:

user@ubuntu-macmini2012:~/homeassistant/www/custom-lovelace/apexcharts$ grep -o -P '.{0,20}1\.4\..{0,20}' apexcharts-card.js
ate,i.card_version="1.4.0",0!==i.data.length
hSpan,card_version:"1.4.0",last_fetched:new
pan:0,card_version:"1.4.0",last_fetched:new
APEXCHARTS-CARD %c v1.4.0 ","color: orange;
th("-raw")?t:ae(t);"1.4.0"!==i.card_version&

and check the chrome javascript console. But as is shown in the console out, again probably only for old fart yaml editors such as I, need to make sure the yaml is updated (see picture below), clear the browser cache, exit chrome, restart chrome, reload resource in HA and yeah! I am current.

Tips? other than I am candidate for HomeKit? ;-)

If there was a clear unique version value to grep for in .js file, that would be a helpful tip.

Thanks for your great work, so useful!

What about let customize lines thick?

Question/enhancement :

It seems like graph_span is at chart level only, would it possible to enable something similar at series/entity level? The specific use case I am looking at would be to graph the same entity over 2 or more periods. Compare last 24 hours to prior 24 hours for example.

Thanks! Keep up the great work!

thanks for adding the header to the card
could add the h1 tag so that it picks up the standard Lovelace card size

I have a use case where I am looking to graph future events - specifically tides and have my own custom component that retrieves the forthcoming tide data into an array.

It would be great to be able to display this data rather than simply the historical data of a sensor. The data can be formatted in a similar manner as a sensor.

At the moment I can fudge this (using mini-graph card) by setting the 'current' value as the value 2 days into the future and therefore when 2 days worth of data is displayed the graph line is accurate, but of course all the timing information is incorrect.

Thanks for considering.

It would be nice if we could configure the chart to use 12-hour time instead of 24-hour time in the tooltips and x-axis labels.

Checklist

• [ x] I updated the card to the latest version available
• [ x] I cleared the cache of my browser
• [ x] I verified that I'm really running the lastest version in my browser console
• [ x] I checked if there is another issue opened with the same problem

Describe the bug
A clear and concise description of what the bug is.
as per https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/255?u=davidfw1960
and Romrider comment Ah right, I forgot I override the values in the code. 😑
Might want to open a bug :slight_smile:
Version of the card
Version: 1.5

To Reproduce
This is the configuration I used:

  fill:
    type: solid
    opacity:
      - 0.2
      - 0.2

Screenshots
If applicable, add screenshots to help explain your problem.
as per forum link
Expected behavior
A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

As per discussion on forum here https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/43?u=davidfw1960

The Hamburber menu is blank maybe because of styling/theme?

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
When hovering cursor over graph, values valid for point under cursor are displayed in popup.
However when card refreshes the data (manifested by reload indicator), the popup disappears.

See animation in screenshot section

Version of the card
Version: 1.5.0

To Reproduce
This is the configuration I used:

type: 'custom:apexcharts-card'
graph_span: 1h
span:
  end: minute
apex_config:
  stroke:
    width: 2
series:
  - entity: sensor.isp1_ping
    name: google (max)
    curve: smooth
    type: line
    color: 'rgb(200, 60, 60)'
    group_by:
      duration: 1m
      func: max
  - entity: sensor.isp1_ping
    name: google (avg)
    curve: smooth
    type: area
    color: 'rgb(255, 160, 160)'
    group_by:
      duration: 1m
      func: avg
  - entity: sensor.isp2_ping
    name: 39-1 (max)
    curve: smooth
    type: line
    color: 'rgb(60, 60, 150)'
    group_by:
      duration: 1m
      func: max
  - entity: sensor.isp2_ping
    name: 39-1 (avg)
    curve: smooth
    type: area
    color: 'rgb(160, 160, 250)'
    group_by:
      duration: 1m
      func: avg
  - entity: sensor.isp3_ping
    group_by:
      duration: 1m
      func: max
    name: 192.168.100.1

Screenshots

Expected behavior
The popup should remain until mouse cursor is moved out from the graph. Graph data refresh shouldn't affect it's appearance

Desktop (please complete the following information):

• Firefox
• 85.0.1

Smartphone (please complete the following information):

• N/A

Additional context
N/A

Would it be possible to add an option to the main show option to show the extremas, mix/max values, below the legend? Similiar to what you can do int the mini-graph card:

Checklist

• I am running the latest version of the card
• I checked if there isn't another feature request opened with the same request
• I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.

No way to define custom locales for dashboards that are not in english.

Describe the solution you'd like

Way to import and load locales for Apexcharts.js.

Describe alternatives you've considered

Currently using everywhere custom labels that do no use "February" like strings. ;)

Additional context

None.

Checklist

• I am running the latest version of the card
• I checked if there isn't another feature request opened with the same request
• I checked that the feature is not already available in the dev branch

I'd like to be able to define a tap_action for the card, similar to what can be done with the mini-graph-card. I use graphs in various places in my config and a tap_action to call a popup via browser_mod.

I want to use the same data to compare with previous 7 days.
Changing offset of a series to any value other than 0 makes the series stop displaying.
Also tried changing graph_span and span.offset data but no luck.
Am I doing it correctly?

v1.4.0-dev.4

type: 'custom:apexcharts-card'
series:
  - entity: sensor.daily_energy
    name: A
    type: column
    offset: '-0day'
    data_generator: |
      return entity.attributes.json.map((entry) => {
        return [new Date(entry.d), entry.s];
      });
  - entity: sensor.daily_energy
    name: B
    type: column
    offset: '+0day'
    data_generator: |
      return entity.attributes.json.map((entry) => {
        return [new Date(entry.d), entry.s];
      });
graph_span: 20day
span:
  start: day
  offset: '-20day'
apex_config:
  plotOptions:
    bar:
      columnWidth: 70%
  dataLabels:
    enabled: false

I am using https://github.com/crowbarz/ha-sql_json to fetch the data from sql

Thanks for making a great addon.

Checklist

• I am running the latest version of the card
• I checked if there isn't another feature request opened with the same request
• I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.
No not a problem but a cool useless nice to have! There is already a spinning icon but having an animation of lines (e.g. left to right drawing) would be the cherry on the cake

Describe the solution you'd like
Each line is drawn slowly, one after each other, and each pixel of a line is displayed from left to right until the display is complete

Describe alternatives you've considered
Well, when you never saw it, you don't consider. But when you already saw, too late, you cannot live without! I do not see something else which can enhance a nice introduction of graphs
BTW there are some animations when you select/deselect a line on a plot, but maybe too fast and the kind of zoom/translation/bouncing is not as pleasant as a speed constant and peaceful point after point line drawing

Additional context
like the animation parameter on mini-graph card

it would be nice to be able to graph attributes within entities

well done for a nice card

First of all. Thanks for a great card. I could finally get rid of my mini-graph cards and get something usable 😍

Now, to the bug :-)

I have a card with the following config:

type: 'custom:apexcharts-card'
graph_span: 24h
update_interval: 1min
header:
  show: true
  show_states: true
  colorize_states: true
  title: Köket - Temperatur
series:
  - entity: sensor.temperature_21
    curve: smooth
    type: line
  - entity: sensor.temperature_23
    curve: smooth
    type: line
apex_config:
  legend:
    show: false
  chart:
    height: 300

It seems as when the value is -20.3 (too long?) it wraps the line and therefore the height of this card differs compared to the card next to it which also has "height: 300" configured. See picture below:

I get the same issue with, for example, height 350 for both.

Would be great to be able to define a line colour for the graphs

When showing multiple line graphs, would be nice to have a title for them. Same as your Traffic Sources title on one of your examples on the forum

I have a graph for the forthcoming year and have used

xaxis:
  labels:
    format: 'MMM'

which displays the date as Jan/Feb/Mar etc along the x axis.

However when mouse overing the graph the tooltips comes out as

Feb 1st, 00:00:00

I’d like to change the format of the tooltip to simply Feb in this case. Using the below does not appear to work.

tooltip:
  x:
    format: 'MMM'

Hello,
I can not install this addon with HACS. I use the newest version of HA and HACS.

Checklist

• [x ] I am running the latest version of the card
• [x ] I checked if there isn't another feature request opened with the same request
• [ x] I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
add an offset for the date/time

Describe alternatives you've considered
I have a sensor that's containts date, but the data is only available 2 days after the real data, so the timestamp is wrong, can we have an option with an offset to resynchronize data and graph date

Additional context
Add any other context or screenshots about the feature request here.

Checklist

• [ X] I am running the latest version of the card
• [ X] I checked if there isn't another feature request opened with the same request
• [ X] I checked that the feature is not already available in the dev branch

Is it possible to inherit the actual color of the value in the states as well? I’ve defined the color values within color_threshold, but I guess it could an interesting feature anyway.

Thanks a lot for creating this card, I love it!

However, I'm missing some documentation for the usage of pie and donut charts. Unfortuantely my donut and pie charts are not beeing plot with config:

- type: custom:apexcharts-card
  chart_type: donut
  header:
    show: true
  series:
    - entity: sensor.stocks_cloudflare_total
      name: Cloudflare
    - entity: sensor.funds_technology_fidelity_total
      name: Global Fidelity

Thanks

Good stuff @RomRider. Thanks for putting this together.

I have a use case where I am trying to chart daily usage of my xfinity internet service. I am trying to create a bar chart of daily usage for a given 'month so far' and an indication if I am on track to stay under my bandwidth cap (1229 GB/mo). I have sensors that have a daily history of usage as well as an array of 6 prior months total usage.

So, for any given day/datapoint, I need to:

• calculate the perday bandwidth amount (bandwidth_cap/days_in_the_month)
• determine what day of the current cycle this data represents (data_timestamp is timestamp of when data was recorded)
• calculate thresholds of usage based on (number of days * perday)
• color a bar or line segment with red, yellow, or green based on say under 70% (green), 70-90% (yellow), and >90% red.
• I need to calculate this for every historical point.

The result should be a set of colorized bars that would show each day individually based on the day into the period. Note that day 1 could be over but day 2 could be under so the bars would be red then green if day 1 was a busy day and day 2 wasn't.

I have the config-template-card which allows me to use scripting over the entire apexcharts-card, however, this is only good for the current (today) instantiation of the entity.

I am looking at the transform option to provide this info, however, there is no access to the actual history item, instead, we get the historical 'x' value which is the state of the item and full access to the hass.states['sensor.xfinity_usage'] object, but this is again the current value, not the actual item that is being pulled from the history.

I think if there were an option to directly access the object structure item being transformed it would allow this capability.

So this line and this one

I think would just need to pass in the current working item to make it available as a named entity as 'x' or 'hass'.

Here is what a sample graph would look like, ideally the green bars would show based on that data points current usage not the usage as of the day it is being displayed. The following yaml was attempting to draw a line graph overlay that would show the 70% and 90% threshold lines, but it became clear that data isn't available. Note, this example is setting color based on the current state, not previous state.

using:

type: 'custom:config-template-card'
variables:
  THIS: 'states[''sensor.xfinity_usage'']'
  tthold: |
    (thresh,THIS) => {
      const date = new Date(THIS.attributes.raw.usageMonths[6].endDate);
      console.log(date);
      const daysmon = date.getDate();
      console.log("daysmon="+daysmon)
      console.log(THIS.attributes.data_timestamp);
      const today = new Date(THIS.attributes.data_timestamp * 1000).getDate();
      console.log(">>" + today);
      const daysleft = daysmon - today ;
      const perday = 1229/daysmon;
      console.log("usage= "+THIS.state);
      return today * perday * thresh;
    }
entities:
  - sensor.xfinity_usage
card:
  type: 'custom:apexcharts-card'
  header:
    show: true
    title: 'Xfinity Usage'
    show_states: false
    colorize_states: true
  update_interval: 12h
  experimental:
    hidden_by_default: true
    color_threshold: true
  apex_config:
    xaxis:
      labels:
        format: M/d
    yaxis:
      min: 0
      max: '${tthold(1,THIS)}'
    legend:
      show: false
    hidden_by_default: true
    color_threshold: true
  span:
    start: day
    offset: '-5d'
  graph_span: 7d
  series:
    - entity: sensor.xfinity_usage
      type: column
      name: Current
      extend_to_end: false
      fill_raw: last
      group_by:
        func: last
        duration: 1d
      show:
        legend_value: false
        datalabels: true
      color_threshold:
        - color: Red
          value: '${tthold(0.9,THIS)}'
        - color: Yellow
          value: '${tthold(0.7,THIS)}'
        - color: Green
          value: 0
    - entity: sensor.xfinity_usage
      transform: "
      console.log('this='+Object.keys(this));
      var THIS = hass.states['sensor.xfinity_usage']; 
      const thresh = 0.7;
      console.log('entity='+THIS.attributes.data_timestamp);
      const date = new Date(THIS.attributes.raw.usageMonths[6].endDate);
      console.log(date);
      const daysmon = date.getDate();
      console.log('daysmon='+daysmon);
      console.log(THIS.attributes.data_timestamp);
      const today = new Date(THIS.attributes.data_timestamp * 1000).getDate();
      console.log('>>' + today);
      const daysleft = daysmon - today ;
      const perday = 1229/daysmon;
      console.log('perday='+perday); 
      console.log('today='+today);
      console.log('thresh='+thresh);
      console.log('x='+x);
      
      return x * today * perday * thresh;
      "
      type: line
      name: Current
      extend_to_end: false
      fill_raw: last
      group_by:
        func: last
        duration: 1d 
      show:
        legend_value: false
        datalabels: true

As a reference, here what the xfinity_usage sensor looks like, there is essentially some data in the outer block like data_timestamp, usage, and total and then there are 6 months of past usage summaries with usageMonths[6] being this month so far and also contains the start/end date of the current period.

{'data_timestamp': 1612890369,
              'friendly_name': 'Xfinity Usage',
              'raw': {'courtesyAllowed': 1,
                      'courtesyRemaining': 1,
                      'courtesyUsed': 0,
                      'displayUsage': True,
                      'inPaidOverage': False,
                      'usageMonths': [{'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 931.0}],
                                       'displayUsage': True,
                                       'endDate': '08/31/2020',
                                       'homeUsage': 931.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '08/01/2020',
                                       'totalUsage': 931.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 987.0}],
                                       'displayUsage': True,
                                       'endDate': '09/30/2020',
                                       'homeUsage': 987.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '09/01/2020',
                                       'totalUsage': 987.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 730.0}],
                                       'displayUsage': True,
                                       'endDate': '10/31/2020',
                                       'homeUsage': 730.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '10/01/2020',
                                       'totalUsage': 730.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 850.0}],
                                       'displayUsage': True,
                                       'endDate': '11/30/2020',
                                       'homeUsage': 850.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '11/01/2020',
                                       'totalUsage': 850.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 882.0}],
                                       'displayUsage': True,
                                       'endDate': '12/31/2020',
                                       'homeUsage': 882.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '12/01/2020',
                                       'totalUsage': 882.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 1099.0}],
                                       'displayUsage': True,
                                       'endDate': '01/31/2021',
                                       'homeUsage': 1099.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '01/01/2021',
                                       'totalUsage': 1099.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0},
                                      {'additionalBlocksUsed': 0.0,
                                       'additionalCostPerBlock': 10.0,
                                       'additionalIncluded': 0.0,
                                       'additionalPercentUsed': 0.0,
                                       'additionalRemaining': 0.0,
                                       'additionalUnitsPerBlock': 50.0,
                                       'additionalUsed': 0.0,
                                       'allowableUsage': 1229.0,
                                       'billableOverage': 0.0,
                                       'currentCreditAmount': 0,
                                       'devices': [{'id': 'B0:39:56:99:E4:E1',
                                                    'usage': 205.0}],
                                       'displayUsage': True,
                                       'endDate': '02/28/2021',
                                       'homeUsage': 205.0,
                                       'maxCreditAmount': 0,
                                       'overageCharges': 0.0,
                                       'overageUsed': 0.0,
                                       'policy': 'limited',
                                       'policyName': '1.2 Terabyte Data Plan',
                                       'startDate': '02/01/2021',
                                       'totalUsage': 205.0,
                                       'unitOfMeasure': 'GB',
                                       'wifiUsage': 0.0}]},
              'total': 1229.0,
              'unit_of_measurement': 'GB',
              'units': 'GB',
              'used': 205.0
}

Thanks in advance
-Fred

Checklist

• [X ] I am running the latest version of the card
• [ X] I checked if there isn't another feature request opened with the same request
• [ X] I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.
the new prototype drag and drop Lovelace editor stops the card from working
because it appends another value pair to the card that your syntax checker does not like

Describe the solution you'd like
ignore extra value pairs that other custom integration may add

Describe alternatives you've considered
not checking extra value pairs at the base level

Additional context
sorry bit long - relevant code lines

    type: 'custom:grid-dnd
        type: 'custom:apexcharts-card'
        layout:
          key: b99d9004-f09e-4299-bb37-137c53ca0c97

  - title: test2
    path: test2
    type: 'custom:grid-dnd
    cards:
      - entities:
          - entity: climate.wiser_back_room
          - entity: climate.wiser_front_room
          - entity: climate.wiser_hall
          - entity: climate.wiser_old_kitchen
          - entity: climate.wiser_mum_bedroom
          - entity: climate.wiser_mums_bath_room
          - entity: climate.wiser_middle_toilet
          - entity: climate.wiser_back_bedroom
          - entity: climate.wiser_top_bath_room
          - entity: climate.wiser_top_floor
        show_header_toggle: false
        title: Room Heating Temperatures
        type: entities
        state_color: true
        layout:
          key: 25a9ed14-9875-47b8-a75d-9168d7dd3df4
      - header:
          show: true
          title: .
          floating: false
          show_states: true
          colorize_states: true
        now:
          show: true
        graph_span: 7d
        span:
          start: minute
          offset: '-7d'
        series:
          - entity: sensor.wiser_itrv_back_room_2
            attribute: device_reception_RSSI
            color: 'rgb(128, 0, 128)'
            group_by:
              duration: 5min
              func: avg
            name: Device RSSI
            curve: stepline
            show:
              in_header: false
          - entity: sensor.wiser_itrv_back_room_2
            attribute: controller_reception_RSSI
            color: 'rgb(0, 128, 128)'
            group_by:
              duration: 5min
              func: avg
            name: Controller RSSI
            curve: stepline
            show:
              in_header: false
          - entity: climate.wiser_back_room
            attribute: percentage_demand
            color: 'rgb(0, 0, 255)'
            group_by:
              duration: 5min
              func: max
            name: Demand
            fill_raw: zero
            unit: '%'
          - entity: climate.wiser_back_room
            attribute: temperature
            color: 'rgb(0, 255, 0)'
            name: Target
            group_by:
              duration: 5min
              func: max
            curve: stepline
            unit: ℃
          - entity: climate.wiser_back_room
            attribute: current_temperature
            color: 'rgb(255, 0, 0)'
            group_by:
              duration: 5min
              func: max
            name: Current
            unit: ℃
          - entity: sensor.outdoor_temperature
            color: 'rgb(128, 128, 128)'
            group_by:
              duration: 10min
              func: avg
            name: Outdoor
        y_axis_precision: 0
        apex_config:
          stroke:
            width:
              - 2
              - 2
              - 3
              - 3
              - 3
              - 3
          yaxis:
            - show: false
              decimalsInFloat: 0
              min: -125
              max: 0
            - show: false
              decimalsInFloat: 0
              min: -125
              max: 0
            - show: true
              opposite: true
              min: -25
              max: 100
              decimalsInFloat: 0
            - show: true
              decimalsInFloat: 0
              min: -7
              max: 30
            - show: false
              decimalsInFloat: 0
              min: -7
              max: 30
            - show: false
              decimalsInFloat: 0
              min: -7
              max: 30
          xaxis:
            type: datetime
            zoom:
              type: x
              enabled: true
              autoScaleYaxis: true
          chart:
            type: line
            stacked: false
            height: 350
            zoom:
              type: x
              enabled: true
              autoScaleYaxis: true
            toolbar:
              show: true
              offsetX: -40
              offsetY: 0
              tools:
                download: true
                selection: true
                zoom: true
                zoomin: false
                zoomout: false
                pan: true
                reset: true
              autoSelected: zoom
          grid:
            borderColor: 'rgb(40, 40, 40)'
            strokeDashArray: 0
            position: back
            row:
              colors:
                - 'rgb(60, 60, 60)'
                - transparent
              opacity: 0.1
            column:
              colors:
                - 'rgb(60, 60, 60)'
                - transparent
              opacity: 0.1
            xaxis:
              lines:
                show: true
            padding:
              top: 5
              right: 4
              bottom: 10
              left: 4
          title:
            text: Back Room Heating
            align: centre
            margin: 0
            offsetX: 5
            offsetY: -75
            floating: true
            style:
              fontSize: 22px
              fontWeight: normal
              fontFamily: undefined
              color: 'rgb(255, 255, 255)'
        show:
          loading: false
        type: 'custom:apexcharts-card'
        layout:
          key: b99d9004-f09e-4299-bb37-137c53ca0c97

the red part should look like

The bottom chart in this picture, two of the entities have a fair number of points about 30k each and are updating subsecond. The graph show the 'spinner' updating a lot. Is there a way to throttle updates, perhaps an option to set an update period in seconds, also to only plot every x values? On a 3.2 ghz i7 mac mini in chrome the lag shows, worried that charts in your tool will be very heavy. Thanks for your work!

  - type: custom:apexcharts-card
    series: 
    - entity: sensor.backyard_sensor_temperature
    cache: true

  - type: custom:apexcharts-card
    series: 
    - entity: sensor.backyard_govee_temperature
    - entity: sensor.backyard_sensor_temperature
    - entity: sensor.backyard_atc_mi_temperature
    cache: true

In v1.1.0-dev.1, I'm not sure if I am using the 'stacked' option correctly, the y-axis seems to odd:

  - type: custom:apexcharts-card
    series: 
    - entity: sensor.backyard_govee_temperature
    - entity: sensor.backyard_sensor_temperature
    - entity: sensor.backyard_atc_mi_temperature
    update_interval: 15s
    hours_to_show: 24
    cache: true
    stacked: true

I would like to remove the state information shown in the legend. The goal would be to be able to show only the series name.

Hello,

With a bar graph like this one:

I would like to know if it would be possible to display the total datalabel per column instead of the label for each element in the stack.
So for column 1 display only 18.4, column 2 display only 23.7, ...
I think that's what they discuss here apexcharts/apexcharts.js#450 but I'm not sure if have access to formatter here ?

May can you add the option to set a card's title?

OK some weirdness I noticed yesterday. Just installed latest beta of HA and it’s zeroed out (most) all of my graphs:

The entities are in recorder and I can see states graphed for the entity eg:

Latest 1.4 version

Thank you and great job!

I guess it would be better to choose what series stacking together instead all for graph.

Hello, I have an issue, for zero value, one pixel is visible instead of no pixel-bar

can you check the problem ?

Hi,
I've left home assistant dashboard opened for a while on a tab. When I went back, the charts were only a white rectangle, and the console had this kind of errors:

Hello,
Regarding this:

Would it be possible to have a function quite equivalent to last, but that would take the last not null/empty or even the last > 0 value ?

Usecase is that we can have a value that is evaluated by a WS. Sometimes, the WS fails and the value is not returned or is evaluated to zero. In this case, the last function isn't working and shows zero instead of a previous correct value.

Your thoughts on an idea for dynamic y-axis based on some entity and formula.

Being able to have a fixed upper and lower limit on the y-axis lets you show the detail and subtleties of data. But two frustrations often occur.

First, you have multiple graphic panels with fixed axis values. You want to change them all to a different common set of values. It's a search and replace in YAML, and since I do not use GUI to manage my Lovelace, I don't know how you would do this in GUI.

Second, if you have a y-scale that can either move up and down or expand and contract based on some dynamic input. For example, outdoor temperatures can range from very low (below 32 or 0) to very high ( 100+ or 40+) . Having the whole range in this all the time, yields charts without detail. So being able to set the upper and lower y-axis value based on some formula on a Home Assistant entity, would allow for this. For example, month of year, a lagging moving average, or any other entity that you could expose in HA with a formula applied.

The issue with a fixed 'min' and 'max' option is that, 1st you cannot have a common one across charts, and 2nd this is not a really good way to understand change if your y scale is changing without your control.

It seems like ApexCharts allows a formula for the min and max values, but I am still trying to figure it out. And, if possible at all, some kind of 'decorator' to bring in a Home Assistant 'input_number' or 'entity' to a ApexCharts 'function' would be needed for what I am trying to describe.

min: Number || Function
Lowest number to be set for the y-axis. The graph drawing beyond this number will be clipped off
You can also pass a function here which should return a number. The function accepts an argument which by default is the smallest value in the y-axis. function(min) { return min }

Thanks for your thoughts.