ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
1909

How is you monthly value stored? What is the trigger? Or does the sensor send this value?

If it comes directly from the sensor, then the date should be correct. If not, maybe adjust the interval in the sensor?

Or did you create a HA sensor that sums up the dailies? In that case you would need to play there.

You can manually change old data if you want by changing the value inside the database, but this is not the best approach for the future.

So first check why the value is written on that date and change that behavior. The chart will then start to be correct.

1910

That would be a plot of the daily (plotted as a stepline area), not monthly. Monthly is a single value, is it not?

P.s.: Looking at that graph I am surprised there are gaps in between the bars. Is there a 0 value in between?
If not, plot as area stepline. Then there will be no gap.

1911

Is there a way to make the bar widths larger in this graph? It seems like they are quite skinny and there is quite a bit of white space between each day (there are 2 possible bars per day).

image

1912

The values comment from a sensor that read real time gaz comsumption.

The daily value is a utility meter that adds up and reset everday so i can see the daily comsumption

The monthly is the same but reseted on the 9th.
Because my gaz provider bills me on the 9th each month

I’ll try the curve line to see how it goes.
But a daily plot will show me the daily value not the monthly.

The gap seems to be correct, I have one bar for october and one for november.

Edit:
I don’t see anyother option that take my monthly utility meter, which value is OK, and store it somewhere.
Or wait for the energy dashboard to include the start data feature long awaited

1914

I got lots of cool ApexCharts included, many thanks for the card.
Most recently I am struggling with the y-axis in multi y-axis charts.
Concretely, it seems that the scaling does not adopt correctly nor the min max values are correct.
Maybe someone can spot the mistake that I have not been able to find?

In this example I use 3 y-axis, the green line shows a %-ratio (in the chart max point about +44%, lowest point about -77%, endpoint is -27%. It is assigned to the third axis, which is in the chart the axis to the very left.
The problem is that this y-axis shows value between 0 and 5!
(The areas show solar power production for a solar setup with west and east panels; the green line shows the ratio between both of them. I am hoping to use this ratio also for determining if there were a problem with little creatures nibbling on the solar cables, which should change the ratio between both solar panel strings…)

Many thanks for helping out!

Bildschirmfoto 2022-11-06 um 10.15.18
Bildschirmfoto 2022-11-06 um 10.15.181920×1426 66.7 KB 

type: custom:apexcharts-card
header:
  show: true
  title: Leistung - Westdach und Ostdach (15 Min Avg)
  show_states: true
  colorize_states: true
graph_span: 30d
experimental:
  brush: true
update_interval: 60m
show:
  last_updated: true
apex_config:
  legend:
    show: false
yaxis:
  - id: left
  - id: below
    show: false
    min: 0
  - id: right
    apex_config:
      tickAmount: 2
brush:
  selection_span: 8h
series:
  - entity: sensor.solar_total_power
    name: Summe
    type: column
    yaxis_id: below
    group_by:
      func: avg
      duration: 15min
    show:
      legend_value: false
      in_header: true
      in_chart: false
      in_brush: true
  - entity: sensor.solar_west_power
    name: West
    type: area
    color: gold
    opacity: 0.2
    yaxis_id: left
    group_by:
      func: avg
      duration: 15min
  - entity: sensor.solar_east_power
    name: Ost
    type: area
    color: red
    opacity: 0.2
    yaxis_id: left
    group_by:
      func: avg
      duration: 15min
  - entity: sensor.solar_west_to_east_power_ratio
    name: Power Ratio
    type: line
    color: green
    opacity: 0.2
    yaxis_id: right
    group_by:
      func: avg
      duration: 15min
    show:
      legend_value: false
      in_header: true
      in_chart: true
1 Like
1915

Is it possible to create a candlestick chart with this integration?

I know Apex Charts can, I just don’t know how to convert my three values (min, max and avg) to a candlestick to show them?

Any tips?

1916

I got an apex card runing with a zigbee rainsensor. My issue is that the apexcard only get a new value when i rains. I would like to get a new value e.g. every 30 min if nothing has happened so the graph will get filed out. Any idea how I can do this?

Capture

      - type: custom:apexcharts-card
        graph_span: 24h
        span:
          end: day
          offset: +20sec
        header:
          show: true
          title: Døgn
          show_states: true
          colorize_states: true
        series:
          - entity: sensor.rainfall_today
            name: ' '
            extend_to: false
            fill_raw: last
1917

so, I think I read through all of the thread again, searched for data_generator and divide entity.state, but am still in the dark… Please help me with what would probably be the silliest question…

trying to have the apex charts plot an entity with unit W(att)

          - entity: sensor.netto_verbruik
            yaxis_id: power
            unit: W

as a kW unit. so need to divide by 1000…

             data_generator: |
               return entity.state.map((record, index) => {
                 return [record.time, record.state/1000];
               });

would appreciate any nudge/suggestion in the right direction.

(probably could also create a new template sensor for that, but that’s no fun of course…)

1918

For the code for getting the heating mode red bars, is that something you put in the card config or is that like a template sensor?

1919

Cosmetic question. Is there a way to get the dotted line and potentially the font a bit less pronounced? I like them there and font size etc is ok, but it’s very present and would especially the line be a bit more opaque.

Next to that. I’m struggling with the gradient. I would love that the green area was a gradient but if I add it the the card apex_config the bar does not show and if I add it to the series (as per code below), it does not do anything.

Help appreciated

Screen Shot 2022-11-08 at 18.08.17
Screen Shot 2022-11-08 at 18.08.171002×482 74.9 KB

Code:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.benext_solar_electric_production_w
        primary_info: state
        secondary_info: name
        name: Now
        icon: mdi:sun-wireless
        icon_color: orange
      - type: custom:mushroom-entity-card
        entity: sensor.solarday
        primary_info: state
        secondary_info: name
        name: Daily
        icon: mdi:sun-clock
        icon_color: orange
      - type: custom:mushroom-entity-card
        entity: sensor.solar_net
        primary_info: state
        secondary_info: name
        name: Grid
        icon: mdi:solar-power
        icon_color: green
  - type: custom:apexcharts-card
    graph_span: 1d
    span:
      start: day
    apex_config:
      chart:
        height: 150px
        fontFamily: Raleway,sans-serif
      legend:
        show: false
    experimental:
      color_threshold: true
      brush: true
    header:
      show: false
      title: Server Rack
      show_states: false
      colorize_states: true
    yaxis:
      - id: first
        decimals: 1
        apex_config:
          tickAmount: 2
          stroke:
            width: 1
      - id: second
        opposite: true
        decimals: 0
        apex_config:
          tickAmount: 2
          stroke:
            width: 1
          fill:
            type:
              - gradient
            gradient:
              type: vertical
              opacityFrom: 0.6
              opacityTo: 0.1
    series:
      - entity: sensor.power_consumption
        name: Power
        yaxis_id: first
        show:
          legend_value: false
        type: column
        group_by:
          func: avg
          duration: 60min
        color_threshold:
          - value: 0
            color: '#228B22'
          - value: 0.1
            color: '#d35400'
          - value: 1.5
            color: '#c0392b'
      - entity: sensor.benext_solar_electric_production_w
        name: Solar
        yaxis_id: second
        type: area
        curve: smooth
        color: '#00bb33'
        show:
          legend_value: false
        group_by:
          func: avg
          duration: 60min
3 Likes
1920

it is a template sensor.

1 Like
1921

Thank you! got it setup and it’s working great

1922

your Google Fit card is awesome - did you share your code anywhere?

1923

Nice touch with the icons, never seen that before :slight_smile:

You can change the transparency with the two last numbers (20 in my example below), FF is no transparency and 00 is full transparency.

  grid:
    show: true
    borderColor: '#00000020'
    strokeDashArray: 4
    position: back
1924

Excellent! That worked! Thanks

Any suggestions for the not working gradient for the green part?

1925

Not sure, I have mine under apex_config and it works fine in my chart. Maybe try my code and experiement from there?

apex_config:
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0
      inverseColors: false
      opacityFrom: 0.9
      opacityTo: 0.6
      stops:
        - 10
1926

Weird. All the configs I have seen also use your method and the they seem to work fine. With me (potentially related to the combination with a bar) this makes the bar’s disappear and does not create a gradient for the area.

I’ve now increase opacity so already looks better. However just noticed a new problem; I display a ‘day’ so obviously no data for the part after ‘now’ (in this case 9:00). How do I avoid the green area to fill to the end of the day? Searched the apex doc’s and found an example but still can’t figure out what to change

Screen Shot 2022-11-09 at 09.14.02
Screen Shot 2022-11-09 at 09.14.021002×484 40.9 KB

1927

Have a look at extend_to in the docs:

1928

Thanks for the pointer. it now works. I think these have changed over time. I tried extend_to_end: false before but that did not work. Seems to have change to extend_to: false that indeed works. I also tried extend_to: now (which made more sense to me) but that made the columns extremely narrow.

1929

Hi !
I have this bug, state value don"t show last value :

image
image1329×383 38.6 KB