Temperature/Humidity Chart

[quaint vine]

Hey guys,

Can anyone help me create two graphs exactly like these? I’d like them with exactly the same colours and the same style.

Could someone please provide the YAML code?

[median lichen]

It is not necessarily just a matter of some yaml, I am pretty sure that is a custom card. I have seen it somewhere before but I cant remember where or what it was called. At first I thought it might be mini-graph-card but I don't think it is.

[thorn blaze]

To me it looks like the Graph Card from MinimalistUI.
MinimalistUI uses heavily templated custom:button-cards to create its design. The card is designed to work in its dashboard, but not your dashboard. You can see the template that it uses at the bottom of the page from the first link. That will give you the majority of the layout requires for this card. The problem is, it also needs the extended_card template which subsequently needs the ulm_custom_actions and ulm_actions_card templates.
It would take a little bit of work (probably not too much though) to go through the templates and pull out what you need to make your own template of this card without needing all the code from the other templates. Also, like Michael mentioned, it uses the custom:mini-graph-card which is embedded into a custom:button-card. And, there's a little bit of card_mod involved.

[median lichen]

To me it looks like the Graph Card from MinimalistUI.
that's the one, I think you are right.

[quaint vine]

Im trying to install the UI Lovelace Minimalist, but give-me that error. I already try to uninstall and install again, and the error persists. Does anyone know what this could be?

[fierce flame]

I use
https://github.com/kalkih/mini-graph-card?tab=readme-ov-file#available-show-options

For showing temp, humidity, and comfort index based on both of them.

HACS> install mini-graph-card

Examples are on GitHub.

[quaint vine]

Do you know, why give-me that error ?'

[fierce flame]

If you want to stick with Lovelace be sure to full reboot.

[quaint vine]

Yes, i already restart the machine

[fierce flame]

You used template. If you want to use template you need to create it

[quaint vine]

I need to reboot, or restart its fine ?

How can i create a template ? Sorry for the question, i just use home assistant since 2 days

[fierce flame]

Your error is because you used template which you don't have. Templates are like "base" for repeated cards. You use template and use it as skeleton for other multiple cards.

You can do it without template.
https://www.home-assistant.io/integrations/template/

You need to see if it's use in your case

[quaint vine]

graph: line
type: sensor
entity: sensor.home_thermometer_temperature
detail: 2
hours_to_show: 24
name: Temperature

I have that now:

But i want to switch to this:

[fierce flame]

Which one Lovelace?

[quaint vine]

The last

The first is with sensor template native

[fierce flame]

ulm_card_graph_type

Fill, line, bar

You choose

Aslo:
ulm_card_graph_points

More points - more data and more precise curve

For lovelance

[quaint vine]

The code on the website lovelace is that:

But when i put this on Button-Card card configuration, give-me that error:

Im doing something wrong ?

[fierce flame]

Delete line template: card_graph and see if it works

Otherwise check If you need to create template in installation of lovelance minimalist ui on github, if so follow instructions

I didn't use it personally

[quaint vine]

Doesnt work 🙁

[fierce flame]

Ah I see there is template code. You need to add it to your configuration

[quaint vine]

But when i put the template code, give-me that error

[fierce flame]

File editor integration

[quaint vine]

Yes, i have

[fierce flame]

In configuration.yaml

[quaint vine]

I just have that

[fierce flame]

There is template code right under example

Paste that bad boy, restart and you're good to go

[quaint vine]

Give-me the same error 🙁

And when i check configuration, give that error

I copy like that:

[fierce flame]

Hm I see

Template is named "extended card" and it's inside card_graph.yaml file you need to create not configuration sorry didn't saw it earlier

So create file card_graph.yaml and paste it there and delete template from configuration.yaml

Then full reboot

If doesnt work do the whole setup process step by step or search YouTube tutorial on it.
Personally I would recommend to switch to one I linked you it's much easier to get working as a beginner.

This one is super easy to install:
https://github.com/kalkih/mini-graph-card?tab=readme-ov-file

This is how it looks like

[quaint vine]

Can I use this example but divided into two graphs? That is, one for temperature and another for humidity, while maintaining the same design?

type: custom:vertical-stack-in-card
cards:

• type: grid
  square: false
  columns: 2
  cards:
  • type: custom:mushroom-entity-card
    entity: sensor.family_room_sensor_temperature
    primary_info: state
    secondary_info: name
    name: Temperature
    icon_color: green
  • type: custom:mushroom-entity-card
    entity: sensor.family_room_sensor_humidity
    primary_info: state
    secondary_info: name
    name: Humidity
    icon_color: blue
• type: custom:mini-graph-card
  entities:
  • entity: sensor.family_room_sensor_temperature
    name: Temperature
    color: var(--green-color)
  • entity: sensor.family_room_sensor_humidity
    name: Humidity
    color: var(--blue-color)
    y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
    name: false
    icon: false
    state: false
    legend: false
    fill: fade

[thorn blaze]

Custom:button-card templates do not go in the configuration.yaml. They go in the Raw Configuration of the dashboard. Configuration templates (The code itself could go into the card's code without the template reference.) I'll go through it tonight when I get home and try to piece it together into a usable template.

[thorn blaze]

Creating the YAML for the template won't work unless OP is running a YAML-Mode dashboard. Storage Mode dashboards cannot reference other files (via !include).

[quaint vine]

Ok, thank you so much, I wait for your feedback 😉

[quaint vine]

I’m using the Dashboard UI (not yaml mode dashboard) so I don’t know if we can find a solution

You can send me a mp if you need more details

[thorn blaze]

This has been a complete nightmare trying to decipher all the different templates that get cross-referenced. But, I think I created a pretty close copy of your original screenshot. I did not mess with the size of the card in this example. If you're using it in a Sections, I'm assuming it will fit itself. (I don't use Sections so I haven't tested it.) There's still some more tweaking that can be done to it. Once it gets to the point that you like what it looks like, I can help you set it up as a template so multiple cards can reference the same layout without having to repeat 100 lines of YAML in each one.

The last line in the expanded code above is }
(So you don't have to download the message.txt.)

[quaint vine]

Thank you so much 🙏 can you help me import that ? I need to import in Raw Configuration Editor ?

I use 4 sensors (2 temperature and 2 humidity)

• sensor.home_thermometer_temperature
• sensor.home_thermometer_humidity
• sensor.outside_thermometer_temperature
• sensor.outside_thermometer_humidity

The graphs temperature can be green, and the graphs humidity can be blue

[thorn blaze]

With the code provided, you should just copy it into the card's code. You don't need to reference a template. Since you just have the two cards, I'd suggest just copying and pasting into both for now.
I'll work on the card some more to get it to support a second entity but I probably won't be able to work on it much until this weekend.

[quaint vine]

Thanks bro, i already I was able to add the charts to the dashboard and change the colours, thank you very, very much! 🙏

I’m just not able to adjust the text I had in the headings (Outside and Lights), because it’s appearing on top of the charts. Could you help, please? What I have is something like this right below the charts:

type: heading
heading: Outside
heading_style: title

[quaint vine]

@thorn blaze can you help me when you have a few minutes please ?

[thorn blaze]

Here's the next iteration of the card. There's variables for two entities and a name variable to override the entity's friendly_name. If you don't want to use a second entity, you can set the entity2 variable to "" or remove it. The code can handle a blank or null variable. I applied some styling in the graph to have the second entity appears as the secondary axis so it doesn't step on the primary entity. I set the number of decimals to 0, but since you're using Celsius, you might consider changing that to 1 (towards the bottom of the card before the card_mod). There's now a card_name variable that appears at the top of the card.

A couple of notes: This card does not handle light/dark modes; the colors are all pretty much hard-coded. Also, there are two places to set colors: for the icon and for the graph. The icon needs to be in RGB because the icon and img_cell (space around the icon) requires RGBA to look right. The graph card can simply use color names.

[thorn blaze]

Also, I set the bounds for the primary Y-axis to be -10 to +20. I think this looks good for Fahrenheit but I'm not sure how it's going to look for Celsius. I may have to make some adjustments to that.

[quaint vine]

@thorn blaze but how can I adjust the space text I had in the headings (Outside and Lights), because it’s appearing on top of the charts. Could you help, please?

I already try with paddin-bottom and margin-bottom and doesn’t work