Open wipatters opened 1 year ago
This is the best I can make of it. I fiddled with the width and height values
Vertical:
type: custom:canvas-gauge-card
entity: sensor.buienradar_temperature
gauge:
type: linear-gauge
width: 160
height: 161
units: °C Home
title: null
minValue: -40
maxValue: 50
majorTicks:
- '-40'
- '-30'
- '-20'
- '-10'
- '0'
- '10'
- '20'
- '30'
- '40'
- '50'
minorTicks: 5
strokeTicks: true
ticksWidth: 10
ticksWidthMinor: 5
highlights:
- from: -40
to: 0
color: darkblue
- from: 0
to: 50
color: orangered
colorMajorTicks: '#ffe66a'
colorMinorTicks: '#ffe66a'
colorTitle: '#eee'
colorUnits: '#ccc'
colorNumbers: '#eee'
colorPlate: '#2465c0'
colorPlateEnd: '#327ac0'
borderShadowWidth: 0
borders: false
borderRadius: 7.5
needleType: arrow
needleWidth: 6
animationDuration: 2000
animationRule: linear
colorNeedle: white
colorNeedleEnd: white
colorBarProgress: lightblue
colorBar: darkgrey
barStroke: 8
barWidth: 4
barBeginCircle: false
valueBox: false
For Horizontal I only changed this:
width: 161
height: 160
I love the look and feel of these gauges! I'm using the latest Home Assistant where radials are working great but Linears get cut in half, either the top in a vertical mode or the left in a horizontal. The bottom example is using your own code with my title of "Black Ink". The top example is using a Manual Card. The bottom is using a Grid Card. On my mobile phone, the top displays nicely yet the bottom appears exactly the same (half)![Linear](https://user-images.githubusercontent.com/108693557/182491974-7dd54b6e-13bd-422c-a01d-1e90d52ff8a5.jpg)