ApexCharts card - A highly customizable graph card

Some interesting options to overlay multiple periods of data on same chart coming in 1.3.0, thanks @RomRider ! You are writing some really great and useful code for Home Assistant!

Very very powerfull card.
I tried to play with it and I would just report a strange situation.
Ok on PC (firefox) ok on Andoird phone (Chrome) KO on iPhone (Safari and Chrome)

PC
Panoramica - Home Assistant – Mozilla Firefox

Android

iPhone

Bye
Sandro

Apple sucks :slight_smile: One day they will learn how to make a browser or just use chromium as their engine… even Microsoft went this way with Edge Chromium… :man_shrugging:

That seems like an upstream bug unfortunately in the ApexCharts.js library that I use.
I’ll have a look but I have little faith about this.

3 Likes

So on my ipad in any browser and the app, It doesn’t display very well… the legend down the bottom will expand to accomodate all entities and the graph shrinks…

Not sure what you’d expect? It tries to fit everything in a small space :slight_smile:
If you force a height (like 200px) in apex_config.chart.height, that would solve the issue.

1 Like

Continuing to explore ways to use @RomRider 's interesting ApexCharts Lovelace Card, lots of possibilities:

1 Like

:tada::tada: New Release :tada::tada:

1.3.0 (2021-01-30)

Features

  • series: Display values as a duration (#21) (227f0ea)
  • series: Hide the value of a serie in the legend (#22) (1e8f748), closes #20
  • series.offset: Compare data from another timeframe with the current timeframe (#19) (af8ba81), closes #18

Bug Fixes

  • config: style was not a valid config option (card-mod/picture-element) (0a38778), closes #15
  • header: Unit would sometimes be on a new line (92fad1b)
  • series.offset: Fix bug introduced by #19 (f5c0d57), closes #18
  • style: Better default styling of toolbar (4d0ef1c), closes #16
3 Likes

By the way, I just figured there is a responsive option possible which would help you redefine parameters (like height) based on the viewport size. So you can redefine the height based on the screen size used, dynamically.

Full doc: https://apexcharts.com/docs/options/responsive/
for eg:

        apex_config:
          responsive:
            - breakpoint: 421  # strictly inferior to 421px screen width, height will be 500px
              options:
                chart:
                  height: 500px

              # Since there is a bug in apexcharts.js, you have to redefine
              # the default value so we put a really big number here
              # which acts as an "else" 
            - breakpoint: 10000
              options:
                chart:
                  height: auto

The commonly considered breakpoints are:

  • 420px maximum width: cover all smartphones in portrait mode
  • 421px to 767px width: most smartphones in landscape mode
  • 768px to 1023px: most Android tablets and iPads in portrait mode
  • 1024px to 1365px: most Android tablets and iPads in landscape mode, older desktop/laptop monitors
  • 1366px and above: iPad PRO, HDready and FullHD desktop laptop monitors
2 Likes

Are there any guideline to get a sense of what will and will not work with Home Assistant? I always try to look inward first for mistakes as a majority of the time it is a PEBCAK. However there are things that either you have on your todo list, is a bug, will not be possible due to limits with HA, or is an error in AjaxCharts. Interested in some of the ‘function’ functions and javascript that is shown.

Simple example, For a scatter chart, I’m trying:

      markers:
        radius: 3
        shape: 'square'

Nothing but circle and circles in cricles :wink:

Hard to tell with the thousands of options there is, let’s discover it while we use it and I’m going to make a section in the Readme for things which do not work if any.

That should work though unless it’s a bug with ApexCharts. I’ll check tomorrow.

Did you also see that the selection zoom and pan icon are missing? Again only on ipad… not on my PC…

Seems unchanged… ipad in landscape mode. (tried 421 as well no change)
Did I screw up the code?

          - type: custom:apexcharts-card
            graph_span: 48h
            header:
              show: true
              title: Temperature BOM Gosford
            apex_config:
              responsive:
                - breakpoint: 1024
                  options:
                    chart:
                      height: 500px
                - breakpoint: 10000
                  options:
                    chart:
                      height: auto
              stroke:
                width: 3
                curve: smooth
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            series:

Yes many options. Don’t worry about the square, circles are just fine. No need to waste a gram on it. My question was just trying to get your sense from a top down what to not bother with. It is feature rich, but clearly some of the stuff is hard and obtuse.

I’m gonna have a glass of :wine_glass: or 2 and try and think up a use case for that :cake: chart in home automation so I can test it :upside_down_face:

Thanks again for your work!

What exact iPad model is it?

ApexCharts doesn’t support pan selection on mobile unfortunately, that’s why it’s not displaying.

IPad Air 2 with latest iOS as well

1 Like

I think the best simple use case is free vs used RAM or disk on a system for eg.

iPad 2 Air’s vw resolution is 1024x768. So:

              responsive:
                - breakpoint: 769  # This will be applied in portrait (<= 768)
                  options:
                    chart:
                      height: 500px
                - breakpoint: 1025  # This will be applied in landspace (<= 1024)
                  options:
                    chart:
                      height: 400px
                - breakpoint: 10000 # viewport width from 1025 to 10000
                  options:
                    chart:
                      height: auto

Genius! That is oh so much better! Thanks.
Love this card. I really hope we don’t burn you out so you tire of all this! I’ll sling you some cash tomorrow as I use this card and your button card and you are just so responsive to us all. Thanks for your great efforts.

Thanks for your appreciation, but no need for that or give it to charities instead :slight_smile: I’m doing this for fun!

7 Likes

Love your work maybe and I just went looking on your repos and didn’t find a donate button. I don’t take donations either for my card but I have for a few devs given donations as I really appreciate their effort and dedication. I really do appreciate your work. It makes HA so much better.

4 Likes

Until now, I had not registered in the community because I did not consider it necessary (and I am short on time).
Today I have signed up just to thank you for this work that I consider fundamental for HA.

Donations for charity have killed me with love.

Thank you!!!

*** The card is fully usable in its current state, I am already changing my entire system, which is simple, to this card.

3 Likes