ApexCharts card - A highly customizable graph card

Again…204v1 precedes 204 and your screenshot does not show in any way the documentation citing to add ‘change’…so where did you find this…link please
EDIT: it may be that he is maintaining his own dev branch but that is not visible. 204 and master donot have ‘change’’ as type

Got it, thanks but he has not created a release out of that…normally I would copy this into the www/community folder but here it seems to require some compilation

Yep…
So utility meter helpers are my workaround for the problem right now.

I’m now using nordpool. But swapped my old ipad for a newer Android model. So don’t have the issue anymore.

thanks !! im going to try this… available via hacs ?

yes sir it is.

Hi everyone,

Can someone help me out with this small problem? I have for example a input_number with the value of 0.02345

But the chart is displaying ‘0’ . How can I correctly change the number of decimals?

type: custom:apexcharts-card

header:
  show: true
  show_states: true
  colorize_states: true
  
chart_type: radialBar
series:
  - entity: input_number.smallnumber
    yaxis_id: a_small_number

yaxis:
  - id: a_small_number
    decimals: 10


Can you try

type: custom:apexcharts-card

header:
  show: true
  show_states: true
  colorize_states: true
  
chart_type: radialBar
series:
  - entity: input_number.smallnumber
    yaxis_id: a_small_number
    float_precision: 5  # Add this for number of decimals behind the 0,

yaxis:
  - id: a_small_number
    min: 0
    max: 1 # or whatever the maximum will be

image

@MrGlad8 I m doing something similar, maybe this helps:
image

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    stacked: true
  dataLabels:
    background:
      borderWidth: 0
      opacity: 0
      foreColor: '#03A9F4'
  plotOptions:
    bar:
      borderRadius: 5
      dataLabels:
        position: center
graph_span: 7d
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Stromherkunft
series:
  - entity: sensor.home_selfuse_energy_daily
    color: orangered
    show:
      datalabels: true
      header_color_threshold: false
      extremas: false
    type: column
    name: von PV
    group_by:
      func: last
      duration: 1d
  - entity: sensor.grid_consumption_energy_daily
    color: pink
    show:
      extremas: false
      header_color_threshold: true
      datalabels: true
    type: column
    name: aus dem Netz
    group_by:
      func: last
      duration: 1d
  - entity: sensor.home_consumption_energy_daily
    color: '#03A9F4'
    show:
      header_color_threshold: true
      datalabels: true
    type: area
    name: Stromverbrauch
    group_by:
      func: last
      duration: 1d
    opacity: 0
    stroke_width: 0

1 Like

I’m struggling with getting nice division of the yaxis. This graph looks nice, but if you look closely, the y axis lables are not correct and the grid lines are off. For example, the cyan line is just zero (the value is zero), the grid line indicated as zero isn’t.
image

Here’s the code:

type: custom:apexcharts-card
header:
  title: Strømpris, i dag og i morgen
  show: true
graph_span: 2d
span:
  start: day
apex_config:
  dataLabels:
    enabled: false
  stroke:
    width: 2
    dashArray:
      - 0
      - 1
      - 1
      - 0
      - 0
  grid:
    xaxis:
      lines:
        show: true
now:
  show: true
  label: Nå
series:
  - entity: sensor.strompris_hjemme
    name: Strømpris
    type: line
    curve: stepline
    color: red
    float_precision: 3
    extend_to: false
    show:
      extremas: true
      legend_value: false
    data_generator: |
      return entity.attributes.raw_strompris.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.strompris_uten_stotte_hjemme
    name: Strømpris uten støtte
    type: line
    curve: stepline
    color: rgb(256, 0, 256)
    float_precision: 3
    extend_to: false
    show:
      extremas: true
      legend_value: false
    data_generator: |
      return entity.attributes.raw_strompris.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.stromstotte_hjemme
    name: Strømstøtte
    type: line
    curve: stepline
    color: rgb(0, 256, 256)
    float_precision: 3
    extend_to: false
    show:
      extremas: true
      legend_value: false
    data_generator: |
      return entity.attributes.raw_stromstotte.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
  - entity: sensor.nordpool_kwh_oslo_nok_4_10_025
    name: Energipris
    type: line
    curve: stepline
    color: green
    float_precision: 3
    extend_to: false
    show:
      extremas: true
      legend_value: false
    data_generator: |
      let today = entity.attributes.raw_today.map((entry) => {
      return [new Date(entry.start), (entry.value)];
      });
      let tomorrow = entity.attributes.raw_tomorrow.map((entry) => {
      return [new Date(entry.start), (entry.value)];
      });
      if(tomorrow[0])
      {
      return today.concat(tomorrow);
      }
      return today;
  - entity: sensor.nettleie_forbruksledd
    name: Nettleie
    type: line
    curve: stepline
    color: blue
    float_precision: 3
    extend_to: false
    show:
      legend_value: false
    data_generator: |
      let nett_today = entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
      let nett_tomorrow = entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
      if(nett_tomorrow[0])
      {
      return nett_today.concat(nett_tomorrow);
      }
      return nett_today;

Under apex_config I’ve tried several variations. For example forceNiceScale, which does not change the graph.

apex_config:
  yaxis:
    forceNiceScale: true

I’ve also tried this:

apex_config:
  yaxis:
    decimalsInFloat: 3
    forceNiceScale: true

which adds decimals and seems to move the grid lines to sensible positions, but it’s not nice:
image

I had hoped that the forceNiceScale option would have expanded the y axis until the grid lines and lables were nice; for example 5 grid lines, the lowest at -0.2 and then 0, 0.2, 0.4, 0.6 (since the data are between -0.072 and 0.452.

It is perhaps a tall order, but tall orders have been served before in this forum, so my hopes are up. :wink:

I have my chart working like a charm for my dynamic energy prices. But it doesn’t quite look like how I want it to look, can anyone help me out?
This is the code I have right now:

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
now:
  show: true
  label: Nu
header:
  show: true
  show_states: true
  colorize_states: true
  title: Stroomprijs vandaag
experimental:
  color_threshold: true
series:
  - entity: sensor.anwb_average_electricity_price_today
    name: Prijs
    stroke_width: 2
    float_precision: 3
    type: column
    opacity: 1
    color_threshold:
      - value: -0.1
        color: '#179647'
      - value: 0
        color: '#8FB900'
      - value: 0.1
        color: '#F2E701'
      - value: 0.2
        color: '#F9B200'
      - value: 0.3
        color: '#F37D01'
      - value: 0.5
        color: '#EC4811'
      - value: 1
        color: '#DC000A'
    data_generator: |
      return entity.attributes.prices.map((record, index) => {
        return [record.time, record.price];
      });      
yaxis:
  - id: Prijs
    decimals: 2

As you can see in the image above (left side), I have two boxes that tell me the date and time, I want to remove the bottom one (I’m not sure where it came from, I don’t think I had it yesterday).
At the top it shows the average daily price, would it be possible to show the current price?
And at last, the colored dot before the name (prijs) is the standard orange color, I’d love it to represent the color of the column. Any help is greatly appreciated :slight_smile:

right now the center value is calculated.
but i do have an entity for this total value - i just want users to tab on this number to show the statistics/graphs.

I’ve built a graph that shows my refrigerator temperature from inside it, and power consumption from a smart plug. I want to additionally show door open/close events from a door contact sensor. I haven’t seem to found a way to do it. Is there something obvious I’m missing? Thanks!

Does anyone have thoughts on how I might hide legend items if their value is 0W or maybe even < 5W?

image

Hi,
I have 2 series on a chart. I wan’t to set min/max values for axis Y based on only one of the series ignoring the other one.
One of them will get cut off on the chart, that’s OK.

Is there a way to set:

min: series1.min
max:  series1.max

Found a solution:

EVAL:(seriesName, opts) => { return opts.w.globals.series[0].reduce((a, b) => Math.max(a, b), -Infinity) }

will return min/max

but

 yaxis:
    - id: left
      min:
      max:

does not accept EVAL

/// apexcharts-card version 2.0.4 /// Bad yaxis min/max format: EVAL:(seriesName, opts) => { return Math.round((opts.w.globals.series[2].reduce((a, b) => Math.max(a, b), -Infinity) + 0.1) * 10) / 10 }

and accoring to documentation

apex_config:

does not accept min/max

Any solutions?

Browser freezes by adding graph.

Hey all, I’ve added a graph to a clean dashboard for a test setup. I’ve noticed the tab lagging. I soon found out after adding this graph the memory of this tab was 65Gb. Needless to say, copy/pasting the graph 4 times MacOs gave me a popup saying I need to close “something” or OS might stop functioning :slight_smile:

This is my small test:

type: custom:apexcharts-card
update_interval: 30min
graph_span: 1day
span:
  start: day
  offset: '-6d'
series:
  - entity: sensor.100_total_system_power

Now, is this a bug, or am I using the card wrong? What I intent to do is get a weekly overview. Yes the span is currently one day. But this is where the problem started with,
Is it crashing on the amount of data? What can I do to get a smooth working graph?

I think it is the mass of data, I had similar with a tempsensor providing data updates very 2s … try to add this to the series and play around a bit

    group_by:
      duration: 5min
      func: avg
1 Like

Thanks, that’s a good pointer! It does work a lot faster now. I might also consider capping the modbus sensor readout. I think I don’t need to record every second :slight_smile: