Apexchart card – dynamic maximum for yaxis

Configuration Frontend
1

Hi all,

I have this chart that displays the breakdown of electricity prices. I’m trying to set a dynamic value for the y-axis maximum. When I use max: auto, the maximum is set to 5, and the chart isn’t fully visible.

image
image717×527 74.1 KB

On the other hand, if I remove max: auto , the maximum is set to approximately twice the highest value in the chart.

image
image720×528 79.3 KB

I would like to set the maximum to, for example, 110% of the highest value (the total price). I thought about creating a sensor for this, but I don’t know how to set the y-axis maximum to the value of that sensor.

Thanks

type: custom:apexcharts-card
header:
  title: Cena elektřiny
  show: true
  show_states: true
  colorize_states: true
apex_config:
  chart:
    width: 100%
    height: 235px
    stacked: true
    offsetX: 0
  yaxis:
    tickAmount: 5
    max: auto
  grid:
    padding:
      top: -20
      bottom: -15
  legend:
    show: false
graph_span: 1d
span:
  start: day
now:
  show: true
  label: Nyní
series:
  - entity: sensor.current_spot_electricity_price
    name: Spot cena
    float_precision: 2
    type: column
    color: mediumseagreen
    show:
      in_header: raw
    data_generator: |
      return Object.entries(entity.attributes).map(([date, value], index) => {
        return [new Date(date).getTime(), value];
      });
  - entity: input_number.distribuce
    name: Distribuce
    float_precision: 2
    show:
      in_header: false
    type: column
    color: pink
    group_by:
      func: avg
      duration: 1h
  - entity: input_number.poze
    name: POZE
    float_precision: 2
    show:
      in_header: false
    type: column
    color: skyblue
    group_by:
      func: avg
      duration: 1h
  - entity: input_number.systemove_sluzby
    name: Systémové služby
    float_precision: 2
    show:
      in_header: false
    type: column
    color: dodgerblue
    group_by:
      func: avg
      duration: 1h
  - entity: input_number.marze_obchodnika
    name: Marže
    float_precision: 2
    show:
      in_header: false
    type: column
    color: khaki
    group_by:
      func: avg
      duration: 1h
  - entity: sensor.dph
    name: DPH
    float_precision: 2
    show:
      in_header: false
    type: column
    color: lightgrey
    group_by:
      func: avg
      duration: 1h
  - entity: sensor.celkova_cena_elktriny_s_dph
    name: Celková cena s DPH
    float_precision: 2
    type: line
    color: red
    group_by:
      func: avg
      duration: 1h
    show:
      extremas: true
2

There is an ongoing discussion thread for all things Apex Charts, in which you will certainly find answers. This now has almost 3900 postings covering all issues.

Also, there is excellent documentation, which provides the information you require.

Y-axis, min or max options, additional formats

Try something like

max: ‘|+10|’

since Apex Charts does not permit variables in settings I don’t believe it is possible to set for +10% of the current value, however +2 might be satisfactory for your graph.

3

Thanks a lof fro your advice.
According to the documentation, it should work, for example:
max: '|+2|'
max: ~50
But unfortunately, none of it works in my chart. The chart still displays maximum=5.

4

I have found that these options are working for me on simple line graphs.
~1500 works, as does “|+100|”

My guess is that some other combinations of settings is confusing the ‘max’ setting.

You have the graph set to ‘stacked’ and a set column series (so the maximum of these is the largest sum of each column)
One series is from a data generator, the rest are grouped averages at 1 hour intervals
You have one additional line graph, being a grouped average at 1 hour
You have set the chart height

I assume that the ‘stacked’ option computes the maximum from the largest summed value of all series, however the line graph cannot be stacked so is plotted as is, but is still possibly being ‘added-in’ for the max computation.

And, low and behold, this issue has been raised as a bug in the last three weeks.

Version 2.1.2, so you could either wait for a fix, unstack your graph, or go back to an earlier version…

5

It really seems, as you wrote, that the maximum is the sum of the values of all sensors. And the bug you mentioned is indeed the same problem. I’ll hope that the next version will fix it.
Thank you.

6

did you try

“|+2|”

instead of

‘|+2|’

?

Good luck !

7

Yes, I did, but still same problem.

8

Hi,

I’m using a similar setup without any issues, but in your case, the problem might be due to the negative top padding or the chart height

type: custom:apexcharts-card
update_interval: 1m
experimental:
  color_threshold: true
header:
  show: true
  show_states: true
  colorize_states: true
graph_span: 2d
span:
  start: day
now:
  color: "#ff9800"
  show: true
  label: Nyní
all_series_config:
  type: column
apex_config:
  legend:
    show: false
  chart:
    stacked: true
    height: 330px
  plotOptions:
    bar:
      borderRadius: 1
      columnWidth: 85%
  stroke:
    show: false
series:
  - entity: sensor.current_spot_electricity_price
    name: Spotová/prodejní cena
    float_precision: 2
    color: "#ff9800"
    group_by:
      func: first
      duration: 1h
    show:
      in_header: raw
    data_generator: |
      return Object.entries(entity.attributes).map(([date, value], index) => {
        return [new Date(date).getTime(), value];
      });
  - entity: binary_sensor.egdtar
    color_threshold:
      - value: 1
        color: "#db4437"
        opacity: 1
      - value: 0
        color: "#43a047"
    float_precision: 2
    color: red
    group_by:
      func: first
      duration: 1h
    show:
      in_header: false
    unit: Kč/kWh
    data_generator: >
      return  Object.entries(entity.attributes.HDO_HOURLY).map(([date, value],
      index) => {
        return [new Date(date).getTime(), value];
      });
  - entity: sensor.custom_energy_distribution_price_taxed
    name: Cena distribuce
    show:
      in_chart: false
  - entity: sensor.custom_energy_import_price
    name: Nákupní cena
    show:
      in_chart: false

image
image616×455 22 KB