Lovelace: mini graph card

Now it works.
I just had to add history: at my config.yaml
Thanks

It AWESOME ! I really like the idea of new card and having all of these additional options that this library brings. I heavily use mini-graph-card in my config and love it, but I would gladily spend my time to rewrite my code to get these new options!
@RomRider One provocative question; I took a look at the ApexCharts library and it seems to have tons of various charts that we are all probably missing from HA… I do :slight_smile: Personally I’d find instant good use (on top of line or area) at least for column, bar, mixed, timeline, pie, radialbar, polar… Is there any, even remote chance that one day, once you master the library, we might get some more broad selection of charts?

Probably yes for most of them, but not initially as the data format is a bit different from time series :slight_smile:
Initially you’ll have area, bar, lines or a mix of all of them at the same time + stacking of bar/lines/areas.

I want to release a working MVP and gather feedback first :slightly_smiling_face:

2 Likes

Hi, do you have an example how to use mini-graph-card with auto-entities? I need to use entity_id variable in auto-entities for the filter to auto populate the cards. However mini-graph-card then says that entity option is removed and I should use the entities list option. But I don’t see how I can use that with auto-entities.

Any advice?

Edit: found it for anyone else interested: 🔹 Auto-entities - Automatically fill cards with entities

type: 'custom:auto-entities'
card:
  type: 'custom:mini-graph-card'
  name: ' '
  hours_to_show: 12
  line_width: 1
  show:
    name: false
    state: false
    icon: false
    labels: true
unique: true
show_empty: true
filter:
  include:
    - entity_id: sensor.battery*
      options:
        entity: this.entity_id
        show_fill: false
      sort:
        method: name
        reverse: false
        ignore_case: false
        attribute: null
        first: 0
        count: 100
        numeric: false

изображение

1 Like

Over there for the new card based on ApexCharts. Be indulgent, it’s in its early days :slight_smile:

:arrow_forward: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/

I’ll try my best to keep mini-graph-card alive too with @kalkih :slight_smile:

3 Likes

How do I get the two lines to use the same Y-axis?

Below I have the garage temp (around 0 degrees) and the outdoor temp (around -4 degrees). They look to be the same temperature looking at the graph because the first y-axis is between 0.1-0.4 and the second y-axis is between -11.1 - -3.6). Ideally both y-axis should be between -11 and 0.4). Basically taking the lowset from both axis and the highest from both axis.

Can this be done to have the representation more accurate? Reason is that I would like to see how the garage temperature follows the outdoor temperature.

Just don’t use the secondary axis?

Ahhh, now you made feel stupid… which I apparently am :smiley: Don’t know what I was thinking, thanks a lot!

Btw, amazing new graph card you have started working on!

There’s no stupid question, only stupid answers :wink:

2 Likes

Hi,
Thank you for the amazing work!

Just wanted to ask if there is a way to reduce the font size of the time value shown in the cards @RomRider ?

Like the one in the example below:
image

Thanks a lot!

Hello there,
Does anybody knows how to change the line color of the graph using card_mod ?
I’ve searched for the corresponding label here with no success.
I have theme switch depending on the sun and i would like the colors to match.
Thanks for your help !

Why not set the color to be a css variable (var(--color-variable)) in mini-graph-card?

1 Like

Thanks @RomRider i didn’t think about it. But do you mean that i should add the colors on my two themes ?

Yes, or use the existing ones from your theme

1 Like

I got it, thanks for your help and congratulation for your absolutely fabulous button_card. I love it :star_struck:

1 Like

I think the only way to achieve this is to use card-mod, there’s no option for that in mini-graph-card

I see,

Thanks a lot for the info @RomRider, appreciated :slight_smile:

I’d like to see the code too please, thanks!

So I’ve got a mini graph that works here. But what I want to do is take the target ‘value’ and set them to work based off an input_number that’s controlled on another dashboard. Below is what I currently a modified idea of what I want to achieve. This should allow me to goto the input_number card and change the target temp. Then from there change the color dynamically on a +/- 5 / 10 system. This should allow for the line to be green when in the range of the target temp.

type: ‘custom:mini-graph-card’
entities:

  • sensor.tent_temperature
    name: Tent Temp
    show:
    labels: true
    color_thresholds:
  • value: ‘var((input_number.temp_target) - 40)’
    color: ‘#231709
  • value: ‘var((input_number.temp_target) - 30)’
    color: ‘#80604d
  • value: ‘var((input_number.temp_target) - 20)’
    color: ‘#654321
  • value: ‘var((input_number.temp_target) - 10)’
    color: ‘#005FFF
  • value: ‘var(input_number.temp_target)’
    color: ‘#00FF00
  • value: ‘var((input_number.temp_target) + 10)’
    color: ‘#FFB111
  • value: ‘var((input_number.temp_target) + 20)’
    color: ‘#FF5E00
  • value: ‘var((input_number.temp_target) + 30)’
    color: ‘#FF0000
    font_size: 50