ApexCharts card - A highly customizable graph card

jimscheel · October 13, 2022, 10:02am

I have this mystery issue. My x axis is not starting from zero?

nordpool

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 24h
header:
  title: Energy price today (snt/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_kwh_dk1_dkk_3_095_025
    type: column
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
    color_threshold:
      - value: 0
        color: green
      - value: 2
        color: yellow
      - value: 4
        color: red

Anyone knows whats wrong?

Holdestmade · October 13, 2022, 10:08am

I think if you don’t specify a value for the y axis, it will auto fit. If you want to force it to use 0 add this:

    yaxis:
      - min: 0

jimscheel · October 13, 2022, 10:50am

Thanks that worked. - But I have orher graphs where i also don’t specify the min. value and they work - so it is a bit strange…

uowis · October 13, 2022, 12:36pm

Do you things it’s possible to for exemple have a button for change span.offset ?

arva · October 13, 2022, 3:32pm

Hi, maybe someone can help me:

i’m using code:

type: custom:apexcharts-card
graph_span: 1d
experimental:
  color_threshold: true
apex_config:
  chart:
    height: 170px
header:
  title: Electricity prices tomorrow (c/kWh)
  show: true
span:
  start: day
  offset: +1d
series:
  - entity: sensor.nordpool_kwh_ee_eur_3_05_02
    show:
      extremas: true
    type: column
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });
    color_threshold:
      - value: 0.06
        color: darkgreen
        opacity: 1
      - value: 0.1
        color: goldenrod
      - value: 0.25
        color: darkred

Data:

current_price: 0.37
average: 0.255
off_peak_1: 0.192
off_peak_2: 0.242
peak: 0.277
min: 0.113
max: 0.411
unit: kWh
currency: EUR
country: Estonia
region: EE
low price: false
tomorrow_valid: true
today:
  - 0.113
  - 0.162
  - 0.162
  - 0.162
  - 0.162
  - 0.194
  - 0.262
  - 0.315
  - 0.351
  - 0.398
  - 0.362
  - 0.322
  - 0.186
  - 0.163
  - 0.162
  - 0.306
  - 0.316
  - 0.295
  - 0.37
  - 0.381
  - 0.411
  - 0.274
  - 0.162
  - 0.12
tomorrow:
  - 0.114
  - 0.039
  - 0.041
  - 0.044
  - 0.055
  - 0.126
  - 0.275
  - 0.341
  - 0.386
  - 0.267
  - 0.393
  - 0.357
  - 0.312
  - 0.314
  - 0.286
  - 0.266
  - 0.291
  - 0.31
  - 0.33
  - 0.348
  - 0.366
  - 0.269
  - 0.262
  - 0.216
raw_today:
  - start: '2022-10-13T00:00:00+03:00'
    end: '2022-10-13T01:00:00+03:00'
    value: 0.113
  - start: '2022-10-13T01:00:00+03:00'
    end: '2022-10-13T02:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T02:00:00+03:00'
    end: '2022-10-13T03:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T03:00:00+03:00'
    end: '2022-10-13T04:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T04:00:00+03:00'
    end: '2022-10-13T05:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T05:00:00+03:00'
    end: '2022-10-13T06:00:00+03:00'
    value: 0.194
  - start: '2022-10-13T06:00:00+03:00'
    end: '2022-10-13T07:00:00+03:00'
    value: 0.262
  - start: '2022-10-13T07:00:00+03:00'
    end: '2022-10-13T08:00:00+03:00'
    value: 0.315
  - start: '2022-10-13T08:00:00+03:00'
    end: '2022-10-13T09:00:00+03:00'
    value: 0.351
  - start: '2022-10-13T09:00:00+03:00'
    end: '2022-10-13T10:00:00+03:00'
    value: 0.398
  - start: '2022-10-13T10:00:00+03:00'
    end: '2022-10-13T11:00:00+03:00'
    value: 0.362
  - start: '2022-10-13T11:00:00+03:00'
    end: '2022-10-13T12:00:00+03:00'
    value: 0.322
  - start: '2022-10-13T12:00:00+03:00'
    end: '2022-10-13T13:00:00+03:00'
    value: 0.186
  - start: '2022-10-13T13:00:00+03:00'
    end: '2022-10-13T14:00:00+03:00'
    value: 0.163
  - start: '2022-10-13T14:00:00+03:00'
    end: '2022-10-13T15:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T15:00:00+03:00'
    end: '2022-10-13T16:00:00+03:00'
    value: 0.306
  - start: '2022-10-13T16:00:00+03:00'
    end: '2022-10-13T17:00:00+03:00'
    value: 0.316
  - start: '2022-10-13T17:00:00+03:00'
    end: '2022-10-13T18:00:00+03:00'
    value: 0.295
  - start: '2022-10-13T18:00:00+03:00'
    end: '2022-10-13T19:00:00+03:00'
    value: 0.37
  - start: '2022-10-13T19:00:00+03:00'
    end: '2022-10-13T20:00:00+03:00'
    value: 0.381
  - start: '2022-10-13T20:00:00+03:00'
    end: '2022-10-13T21:00:00+03:00'
    value: 0.411
  - start: '2022-10-13T21:00:00+03:00'
    end: '2022-10-13T22:00:00+03:00'
    value: 0.274
  - start: '2022-10-13T22:00:00+03:00'
    end: '2022-10-13T23:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T23:00:00+03:00'
    end: '2022-10-14T00:00:00+03:00'
    value: 0.12
raw_tomorrow:
  - start: '2022-10-14T00:00:00+03:00'
    end: '2022-10-14T01:00:00+03:00'
    value: 0.114
  - start: '2022-10-14T01:00:00+03:00'
    end: '2022-10-14T02:00:00+03:00'
    value: 0.039
  - start: '2022-10-14T02:00:00+03:00'
    end: '2022-10-14T03:00:00+03:00'
    value: 0.041
  - start: '2022-10-14T03:00:00+03:00'
    end: '2022-10-14T04:00:00+03:00'
    value: 0.044
  - start: '2022-10-14T04:00:00+03:00'
    end: '2022-10-14T05:00:00+03:00'
    value: 0.055
  - start: '2022-10-14T05:00:00+03:00'
    end: '2022-10-14T06:00:00+03:00'
    value: 0.126
  - start: '2022-10-14T06:00:00+03:00'
    end: '2022-10-14T07:00:00+03:00'
    value: 0.275
  - start: '2022-10-14T07:00:00+03:00'
    end: '2022-10-14T08:00:00+03:00'
    value: 0.341
  - start: '2022-10-14T08:00:00+03:00'
    end: '2022-10-14T09:00:00+03:00'
    value: 0.386
  - start: '2022-10-14T09:00:00+03:00'
    end: '2022-10-14T10:00:00+03:00'
    value: 0.267
  - start: '2022-10-14T10:00:00+03:00'
    end: '2022-10-14T11:00:00+03:00'
    value: 0.393
  - start: '2022-10-14T11:00:00+03:00'
    end: '2022-10-14T12:00:00+03:00'
    value: 0.357
  - start: '2022-10-14T12:00:00+03:00'
    end: '2022-10-14T13:00:00+03:00'
    value: 0.312
  - start: '2022-10-14T13:00:00+03:00'
    end: '2022-10-14T14:00:00+03:00'
    value: 0.314
  - start: '2022-10-14T14:00:00+03:00'
    end: '2022-10-14T15:00:00+03:00'
    value: 0.286
  - start: '2022-10-14T15:00:00+03:00'
    end: '2022-10-14T16:00:00+03:00'
    value: 0.266
  - start: '2022-10-14T16:00:00+03:00'
    end: '2022-10-14T17:00:00+03:00'
    value: 0.291
  - start: '2022-10-14T17:00:00+03:00'
    end: '2022-10-14T18:00:00+03:00'
    value: 0.31
  - start: '2022-10-14T18:00:00+03:00'
    end: '2022-10-14T19:00:00+03:00'
    value: 0.33
  - start: '2022-10-14T19:00:00+03:00'
    end: '2022-10-14T20:00:00+03:00'
    value: 0.348
  - start: '2022-10-14T20:00:00+03:00'
    end: '2022-10-14T21:00:00+03:00'
    value: 0.366
  - start: '2022-10-14T21:00:00+03:00'
    end: '2022-10-14T22:00:00+03:00'
    value: 0.269
  - start: '2022-10-14T22:00:00+03:00'
    end: '2022-10-14T23:00:00+03:00'
    value: 0.262
  - start: '2022-10-14T23:00:00+03:00'
    end: '2022-10-15T00:00:00+03:00'
    value: 0.216
unit_of_measurement: EUR/kWh
icon: mdi:flash
friendly_name: nordpool_kwh_ee_eur_3_05_02

With the result:

I have two isues:

Graph is rounding the numbers to one decimal place. I would like to see data with three decimal places.
I would like to see the graph starting from 0 not the lowest value. Tomorrows graph does not show it very well, because there isa rounded value of 0 which actually is 0.041. Here is a example of today’s graph with the issue of starting from 0.1 instead of 0:

Screenshot 2022-10-13 at 18.31.31978×632 34.7 KB

trueKAMi · October 14, 2022, 7:43am

Hey @arva

For the decimals you can add:
float_precision: 3
to the - entity

You can define y-axis behaviour as follows:

yaxis:
  - id: y1
    decimals: 3
    min: 0

And then you have to add
yaxis_id: y1
To all - entity entries in your graph

which would make the relevant section something like:

span:
  start: day
  offset: +1d
yaxis:
  - id: y1
    decimals: 3
    min: 0
series:
  - entity: sensor.nordpool_kwh_ee_eur_3_05_02
    show:
      extremas: true
    type: column
    yaxis_id: y1
    float_precision: 3

Hope this helps

Holdestmade · October 14, 2022, 7:45am

Maybe some of the data has a zero value ?

arva · October 14, 2022, 8:12am

Thank you very much. Now everything is perfect!

webosa · October 14, 2022, 10:21am

Hey

if you only want the box border gone, change the

borderWidth: 0

or if you want to hide the whole “background box” gone then set

background:
  enabled: false

asifkassam · October 14, 2022, 4:11pm

Hi @backcountrymountains did you figure out how to use hass.states['sensor.other'] in a transform for this use case? I get the same - it just returns the current value

cokecan72 · October 14, 2022, 4:59pm

Loving this graph card. Hoping someone can help fix an odd issue I’m running into.

I’m trying to make a bar chart that display’s 7x days of energy usage (total usage per day). I have a sensor that actually reports this so I just need to grab the latest or max value from this. I’ve got the card basically showing what I need but the label on the X-Axis for “today” is always missing. The preceding 6x days are completely fine and show without issue. This is when using the group_by function. If I switch this to the statistics function, the label for today displays but I then get an entire columns width of extra space at the end of the graph.

Does anyone have any idea what’s happening here and how to fix it?

Left is group_by, Right is statistics

shamseer · October 15, 2022, 7:40am

Hello All

May i know how do i remove legend value and name below from chart

Filipe_Goncalves · October 15, 2022, 11:08am

Hi guys. I’ve searched the forum but can’t seem to find an example for the Transform option I’m looking for. Can anyone show me an example of transform to subtract the value of the sensor but the value of another sensor?
I tried:

- entity: sensor.cepsa_lisboa_estadio_universitario_gasoleo_simples
    transform: return x - hass.states['input_number.desconto_cepsa'];

The result is N/A. (both entities use the same unit of measurement)

edit

got it:

transform: return x - hass.states['input_number.desconto_cepsa'].state;

uowis · October 15, 2022, 1:11pm

perhaps with :

span:
 start:
 end:

uowis · October 15, 2022, 1:16pm

Is it possible to reduce value stroke width on radialBar type ?

erik7 · October 16, 2022, 4:32pm

Sorry if this has been asked already. I do have two questions:

how do I the date of today, right now it’s missing?
As you might see, it’s only showing a very small part of the last (orange) bar/column, how do I get see the whole (orange) bar/column?

afbeelding

cokecan72 · October 16, 2022, 8:00pm

Thanks for the suggestion. I am already using end: day

I’m not sure if this is a bug with the card but I changed it to start: day then messed about with and offset before setting it back to end: day and now it’s displaying properly?

MarvinE · October 17, 2022, 6:21am

Can anyone tell me how I can get more than 1 decimal inside the graph when you hover over the columns? It rounds off every value to 1 decimal, and it is not very helpful.
.
Config:

 - type: 'custom:apexcharts-card'
      apex_config:
        yaxis:
          labels:
            formatter: |
              EVAL:function (val) {
                return val.toFixed(2) + "€" ;
              }
          show: true
          min: 0
      graph_span: 2d
      span:
        end: day
        offset: +24h
      header:
        show: true
        title: Stroomkosten
      series:
      - entity: sensor.powercost
        type: column
        name: kWh
        color: '#e3a8ab'
        opacity: 0.3
        extend_to_end: false
        stroke_width: 2
        unit: €
        show:
          in_header: false
          legend_value: false
        data_generator: |
          return entity.attributes.Prices.map((entry) => {
             return [new Date(entry.readingDate), entry.price];
           });

Mariusthvdb · October 17, 2022, 7:28am

use:

            float_precision: 3

?

Mariusthvdb · October 17, 2022, 7:32am

copying an example config I am trying to understand, I come across:

    apex_config:
      tickAmount: 4

and I cant see the effect of that. in the docs, the is mentioned (used in an example) 3 times, but not explained.

Can anybody tell me what this is for please?

Options (Reference) > yaxis – ApexCharts.js says it configures:

Number of Tick Intervals to show

but the still doesnt mean much to me…