Gauge card - bar version

Feature Requests
1

Is there a possibility to develop a little bit gauge card that could be used in option as a vertical bar?

The gauge card, especially after the last improvements, is a very nice one but sometimes we have to spare place. On the other hand, there are no easy solutions for bar with needles and colored sections. I use for long time custom:canvas-gauge-card

image

But it is not well cooperating with HA in ara of responsiveness web design.

2

It would be nice to have it built in but until then, this one works:

1 Like
3

I know that bar. Very nice and I use it in a few places. But I am unable to implement with that bar something similar to my needs (pic in the first post): center is zero, below zero is in one color, above second one color and somehow indicated at least one more, special zone

1 Like
4

Did you ever find a solution to this? I’m also looking for a horizontal bar card that supports 0 in the middle. And ideally does not have to be % based values only.

1 Like
5

Unfortunatelly not. But I did not made any new investigation since previous post.

6

Same request here, this seems like a very basic and useful graph…

1 Like
7 
type: custom:html-card
title: Temperatur - nur test
content: >
  <table>  <tr><td>innen<td>  <div style="position: relative; width: 400px;
  height: 80px; background-color:grey;color:white;padding:15px">
     <div style="padding-left:calc([[sensor.temp_innen]]/40 * 100% - 5%); height: 25px; ">[[sensor.temp_innen ]]°C </div>
     <!-- Balken -->
     <div style="display: flex; height: 20px; width: 100%;">
         <div style="width: 100%; height: 20px; background: linear-gradient(to right, lightblue, blue, green, yellow, red);"></div>
     </div>
     <!-- Marker bei x % -->
     <div style="position: absolute; top: 35px; left: calc([[sensor.temp_innen]]/40 * 100%); height: 30px; width: 4px; background-color: black;"></div>
     <!-- X-Achsen-Beschriftung -->
     <div style="display: flex; justify-content: space-between; margin-top: 5px; width: 100%;">
         <div style="width: 25%; text-align: left;">0°C</div>
         <div style="width: 25%; text-align: left;">10°C</div>
         <div style="width: 25%; text-align: left;">20°C</div>
         <div style="width: 25%; text-align: left;">30°C</div>
     </div>
  </div>  </tr>    <tr><td>außen<td>  <div style="position: relative; width:
  400px; height: 80px; background-color:grey;color:white;padding:15px">
     <div style="padding-left:calc([[sensor.temp_draussen]]/40 * 100% - 5%); height: 25px; ">[[sensor.temp_draussen]]°C </div>
     <!-- Balken -->
     <div style="display: flex; height: 20px; width: 100%;">
         <div style="width: 100%; height: 20px; background: linear-gradient(to right, lightblue, blue, green, yellow, red);"></div>
     </div>
     <!-- Marker bei x % -->
     <div style="position: absolute; top: 35px; left: calc([[sensor.temp_draussen]]/40 * 100%); height: 30px; width: 4px; background-color: black;"></div>
     <!-- X-Achsen-Beschriftung -->
     <div style="display: flex; justify-content: space-between; margin-top: 5px; width: 100%;">
         <div style="width: 25%; text-align: left;">0°C</div>
         <div style="width: 25%; text-align: left;">10°C</div>
         <div style="width: 25%; text-align: left;">20°C</div>
         <div style="width: 25%; text-align: left;">30°C</div>
     </div>
  </div>  </tr>  </table>

image

3 Likes
8

+1 for this feature to be implemented!

9

Would love for something like this too. In the meantime, here’s an example implemented using a Tile card and custom-card-features’ slider:

image

This is a little more advanced than a basic bar would be–it actually uses another entity’s value to set the scale. Strip that out if you just want to manually define the ranges.

YAML Code for the above Tile Card 

features:
  - type: custom:service-call
    entries:
      - type: slider
        entity_id: sensor.waterguru_sandcastle_free_chlorine
        range:
          - 0
          - >-
            {{ states("sensor.waterguru_sandcastle_cyanuric_acid_stabilizer") |
            float(0) * 0.22 }}
        tap_action:
          action: none
        step: 0.1
        autofill_entity_id: true
        thumb: line
        styles: >-
          {% set cya =
          states('sensor.waterguru_sandcastle_cyanuric_acid_stabilizer') |
          float(0) %}

          {% set max_line = cya * 0.22 %}

          :host {
            flex-basis: 200%;
            --background: linear-gradient(
                to right, 
                var(--error-color) 0%, 
                var(--error-color) {{ cya * 0.05 * 100 / max_line}}%, 
                var(--warning-color) {{ cya * 0.051 * 100 / max_line}}%, 
                var(--warning-color) {{ cya * 0.075 * 100 / max_line}}%, 
                var(--success-color) {{ cya * 0.0751 * 100 / max_line}}%,
                var(--success-color) {{ cya * 0.133 * 100 / max_line}}%,
                var(--warning-color) {{ cya * 0.1331 * 100 / max_line}}%, 
                var(--warning-color) {{ cya * 0.170 * 100 / max_line}}%,
                var(--error-color) {{ cya * 0.1701 * 100 / max_line}}% 
                );
            --background-opacity: .75;
          } .active {
            display: none;
          }
type: tile
entity: sensor.waterguru_sandcastle_free_chlorine
features_position: inline
vertical: false
name: Free Chlorine
state_content: state
2 Likes