ApexCharts card - A highly customizable graph card

first 2 can have some benefits, third is questionable, but it’s a personal thing on what you like…

I like the first example. All my mini-graph cards have colour levels for “quick glance” reading.

4 Likes

Difference between mini-graph-card and this one is that you can’t put gradient on the line and on the filled area at the same time. I guess you could assign twice the sensor, one with type: area and line width 0 and one with type: line. But that would also generate 2 entries in the legend :man_shrugging:

1 Like

I just noticed the line in the first example.

That did the trick! Almost :slight_smile:Now th eproblem is that opacityTo and OpacityFro distribute color evenly across value span, so if there are peaks, the gradient is visible only in peaks, but not in lower values… I tried to use stops for this, but it seems to be ‘global’ for all series and again always from the top. It does not work per serie (unless there is a way to have array of arrays), so if colod distribution looks good for upper graph, it become screwed for bottom one… See on the screenshot below. It is using following gradient configuration:

    gradient:
      type: vertical
      shade: dark
      stops:
        - 60
        - 100
      opacityFrom:
        - 1
        - 0.2
      opacityTo:
        - 0.2
        - 1

Screenshot 2021-02-06 at 7.40.12

One more observation; do the card accpt values from input_number? On the chart there should be red line at zero, but is not… I tried to usedespite I tried to use, but no change:

    extend_to_end: true
    fill_raw: zero

From this perspective §I realli lke your idea of color_threshold feature. At least for me this would solve the problem :slight_smile:

Yes it should support input_number. Isn’t your entity excluded from your recorder?

No, it is is included specifically for bwinf able to draw the zero-line on some charts. Trick is probably that is not updating, but has costant value of zero since set up. So is there any block in displaying values for series, that did not changed during chart x-axis time span?

Easier might be to use annotations from apexcharts: https://apexcharts.com/docs/options/annotations/

Hey I haven’t really tried to look into what is possible with this myself yet but I just wanted to float a couple of (probably more advanced) charting ideas (I’m into data viz) and see if anyone had comments on interest/feasibility:

  • racing bar chart for say, real time energy monitoring (if you have a few plugs that monitor power)

  • Tooltip charts to drill down on data point (say see chart of hourly data when hover on daily aggregation)

  • Whats the deal with drop down filters for slice/dice like you’d find in PowerBI/Tableau etc. I guess there’s not as many cases where you’re aggregating categories that you might then want to selectively filter, but there would be some (again, maybe energy usage).

Thoughts?

Has anyone given a Treemap a go?

That might be possible in the future with this card.

The library I use supports something like that but it’s really complex to make it available though yaml. I might consider it in the future, but not for now.

PowerBI/Tableau: multi-million $ companies and are BI tools.
This is just a card for home-assistant and I think if you are using home-assistant for that, it’s the wrong tool :slight_smile:

4 Likes

It’s not supported in this card, at least not yet.

1 Like

I think that in this phase of development it is acceptable with changes that break something.

Actually, let me ask you something: What would be the kind of data you’d like to represent in a treemap?

Those 2 are the ones I think I could implement in the card:

I was toying with replacing these (see screenshot below) - if it’s not currently possible, no big deal as I was tinkering more than anything


2 Likes

Ta and thanks for response. Take your point about the big boys but I thought at least simple drop down filters weren’t too wild an ask. Def wouldn’t use HA as BI tool :slight_smile:

Off topic but, where/how are you sourcing your Aussie state Covid stats from? Can you get “current” number? Cheers.

ESRI Australia/The Guardian webmap

My config:

1 Like

I’m after some advice about the best way to implement a rainfall chart. I have it working but I am not sure if there is maybe a better way to do it. The rainfall data comes from the weather station as an increasing value that resets at midnight. Because of that I had to combine span: and group_by:, like so:

type: 'custom:apexcharts-card'
header:
  show: true
  title: Rain
  show_states: true
  colorize_states: true
graph_span: 14d
span:
  start: day
  offset: '-14d'
series:
  - entity: sensor.rain_accumulation
    type: column
    group_by:
      duration: 1d
      func: max

The result is fine, I am just unsure if there is a better or more elegant way to do this:

image

Edit: the real reason I am asking is that I got some weird results building this and now I am a bit hesitant as to whether it’s finally right… :slight_smile:

I’d represent it in the same way, but what are the “weird results” you are having?