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:

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

8

+1 for this feature to be implemented!