ApexCharts card - A highly customizable graph card

Possible to give me an example? 1m is 1 month no? 1min is mintues i thought

Ok i got it working now
Kinda

type: 'custom:apexcharts-card'
        graph_span: 365d
        update_interval: 1hour
        cache: true
        span:
          end: month
          offset: '-1hour'
        header:
          show: false
        apex_config:
          xaxis:
            labels:
              format: MM
              show: true
              showAlways: true
          yaxis:
            forceNiceScale: false
            decimalsInFloat: 0
          chart:
            type: area
            height: 300
          stroke:
            show: true
            width: 1
          legend:
            show: true
          dataLabels:
            enabled: false
            distributed: true
          fill:
            type: gradient
            gradient:
              shadeIntensity: 0.1
              opacityFrom: 0.25
              opacityTo: 1
              inverseColors: true
              stops:
                - 0
                - 90
                - 100
        series:
          - entity: sensor.maandelijks_energie_dagtarief
            type: column
            name: Stroom dagtarief
            float_precision: 2
            group_by:
              func: max
              duration: 31d
          - entity: sensor.maandelijks_energie_nachttarief
            name: Stroom nachttarief
            float_precision: 2
            type: column
            group_by:
              func: max
              duration: 31d
          - color: 'rgb(128,128,128)'
            entity: sensor.maandelijks_gas
            type: column
            name: Gas
            float_precision: 2
            group_by:
              func: max
              duration: 31d
 

It’s showing like this:

Why is january and february at the end of the chart?

(i’m just using dsmr, so its normal i dont get graphs data before

hi is it possible to remove the marked area in a radiabar figure?
image

have you tried setting the legend to false?

apex_config:
  legend:
    show: false
1 Like

thanks. it works

I’m not sure I understand the question?

I guess they want a graph that starts at Jan 1st and ends at Dec 31st.

I guess in this case what you want @skank is:

span:
  start: year

(not sure also why you have an offset, the timezone is automatically calculated)

Yes,
But when i think of it , its normal cause it shows 12 months
So latest is always the current one

Thank you !
Lovely card by the way !
edit: its more narrow now, i liked it before where i have the number for each month, but in the order like below

That’s because your group_by 31 days times 12 is superior to 365 days and the slices of time for the group by are always built from the end of the chart.

Hi, great work! Very nice card! I’m going to replace all my mini graphs with this.
I have a question. Is it possible to change the unit of measurement? It doesn’t take the sensor unit (TB) but replace it with %

Cattura

Not so far, see here

Ok thanks, Hopefully this will be supported with the upcoming changes

Hi,
Is there a way to ignore certain values from the charts? Sometimes due to connection dropping to certain devices, it causes the sensor to record a spike.

You could use transform to get rid of those values.

Thx @RomRider . I tried this
transform: "return x === 100 ? null: x;"

But it doesn’t seem to work.

What is your full configuration?

Here you go.

- type: custom:apexcharts-card
  apex_config:
    yaxis:
      - title:
          text: Temperature
        decimalsInFloat: 0
        min: 40
        tickAmount: 6
  all_series_config:
    extend_to_end: false
    stroke_width: 2.5
    show:
      legend_value: false
  color_list: ['MediumOrchid','Coral','MediumAquamarine','DodgerBlue','SaddleBrown']
  graph_span: 1d
  y_axis_precision: 0
  series:
    - entity: sensor.outside_temp
      name: Current
    - entity: sensor.ble_temp_kitchen
      name: Kitchen
    - entity: sensor.temp_bedroom
      name: Bedroom
      transform: "return x === 100 ? null: x;"
    - entity: sensor.temp_rumpus
      name: Rumpus
      transform: "return x === 100 ? null: x;"

Could you try return parseFloat(x) === 100 ? null : x;

If it works it means your sensor stores its state as a string, not as a number.