Bug - graph size is drastically shrunk when used in grid view

[timdonovanuk]

Why are the graphs so tiny?

There is way too much padding around values, that could be put to better use by displaying the graph:

I have played with various bound settings and height settings (this just increase the card height downwards which looks awkward in grids).

Sometimes I see the graph div is much bigger but the graph doesn't seem to fill it?

How do you get it to display something more like this:

[timdonovanuk]

Changed to bug, as realised this extra padding is only an issue when the card is used in grid view.

[timdonovanuk]

Even using horizontal-stack this card does not function as shown in the example docs:

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - sensor.lounge_climate_sensor_temperature
    line_color: blue
    line_width: 8
    font_size: 75

Looks like (note tiny graph height):

but should apparently look similar to:

[ildar170975]

Why this issue is considered as a BUG? It's just a matter of combination of card's size & fonts' size. Try fixing a view by customizing font size first.

[timdonovanuk]

@ildar170975

I'm not sure what you mean, because here it is with font_size: 5 and font_size: 200

The font size has no impact on the positioning of the graph.

[ildar170975]

Please give me a code example - I will play and try to give you smth. As well as a code for your attempts.

Also, give me a desired view - made in MS Paint or whatever.

[vincentscode]

I am facing the same issue in a stack configuration. As you can see the graph fills up only a tiny portion of the tile regardless of font-size. The yaml is as follows:

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ens160_eco2
        name: eCO2
    lower_bound: 400
    upper_bound: 2000
    color_thresholds:
      - value: 600
        color: '#3D003D'
      - value: 1000
        color: '#800080'
      - value: 1500
        color: '#C700C7'
    line_width: 8
    hours_to_show: 12
    points_per_hour: 8
    font_size: 75
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ens160_tvoc
        name: TVOC
    lower_bound: 0
    upper_bound: 2000
    color_thresholds:
      - value: 50
        color: '#266E26'
      - value: 750
        color: '#3BAB3B'
      - value: 1500
        color: '#38E038'
    line_color: lightgreen
    line_width: 8
    hours_to_show: 12
    points_per_hour: 8
    font_size: 75

[pipetboy]

I'm facing the same problem. Also in a grid card. I'm using it without state, icon or name. Just with the graph and only half the card is filled. It's a waste... Hope somebody can fix this bug...

[ildar170975]

Someone may wish to have a grid card with 10 card in a row. Surely most of even conventional HA cards will be shrunk and become not readable. A solution - do not try to pack many cards together))). That was a joke, but let us be realistic. Most cards (conventional, custom) are designed for a standard column’s width - not to be packed together in a grid. If a user packs several cards together - then get ready for aftermaths. Means - use all available features to decrease fonts, hide non-critical info etc.

In this particular case - make a font for the “state” line smaller - either by some available option (if present) or by card-mod. Making a card to be automatically adjustable to “let’s put 10 cards in a row” cases is rather difficult task.

If someone really needs to make the “state” row more compact and if this is not possible by available options - then create a corresponding issue (bug or FR). This issue will be closed now.

[vincentscode]

Responsive Design is not a bad thing. It's actually really important these days.

[ildar170975]

I totally agree with you. But sometimes it is NOT easy to get this auto-adjustment.

Check this - https://github.com/kalkih/mini-graph-card/issues/890#issuecomment-1352246523 I proposed my help - and got no feedback. If you have a particular case with troubles - give me this info, I will try to help you.

[timdonovanuk]

Apologies @ildar170975 - you asked for a mockup and example code, both of which I already included in my previous posts.

Most cards (conventional, custom) are designed for a standard column’s width - not to be packed together in a grid. If a user packs several cards together - then get ready for aftermaths.

I mean, a 2 or 3 column width is not exactly extreme. And HA supports vertical/horizontal grid layouts. And we're talking dashboards here, which are extremely suited to grid layouts. And your own documentation shows a column of 3 ;)

If you use the HA native graph cards in exactly the same layout, they work fine, so its fairly easy to compare. I ended up using the HA graph card with some card_mod changes to the CSS to get the look and feel I wanted.

Thank you anyway :)

[ildar170975]

you asked for a mockup and example code, both of which I already included in my previous posts.

OK, if this is still needed - I will try to give you my proposals. Mainly it will be by using card-mod. We should decrease a font-size for the “state” row, decrease a padding-bottom for this row. But - this could be a solution for THIS particular case, other cases should be considered separately.

I mean, a 2 or 3 column width is not exactly extreme. And HA supports vertical/horizontal grid layouts. And we're talking dashboards here, which are extremely suited to grid layouts. And your own documentation shows a column of 3 ;)

Correct, but packing a grid (stack) with 3 columns inside a “standard” column will definitely cause a bad look. I myself use not more than 2 cards in a row. Also, using stacks in a Panel view (or a custom:layout-card) could be a better solution (in some cases) since you do not have «standard” columns.

[ildar170975]

https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/2253?u=ildar_gabdullin