Node-red 5.0.8 Flowfuse dashboard 1.33.0 node.js 22.15.0 I would appreciate help in configuring @hotnipi "Yet another gauge aka 'Plums'" gauge, to dynamically change the value text color, linked to the value. The gauge is displaying wind gust speed and would like the value color to reflect the Be…

The speedcolors function is built as computed property Reasonable. in taht case you don't need to call it as a function but have that property usage defined in component Hwre's how: <svg ref="hn-gauge" width="100%" height="97.8%" viewBox="0 0 100 100" :style="{'--svg-fill-color':speedcolors }"> …

[image] Toeton: Please set me straight. The document is long but useful to read [image] Using CSS custom properties (variables) - CSS | MDN Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific…

Maybe also check out this forum post: [image] How to combine SVG's and style overrides General Saw an interesting article on SVG style overrides recently. Ended in in discussion wit the authors about what I thought would be a better way using CSS Variables. T…

@TotallyInformation , thanks for the info. I did find online that svg.img require different method of changing the color. The svg in hotNipi is inline, therefor a correctly crafted CSS snipit will change the color. I have done this and verified it works. @hotNipi I got the CSS variable to work, than…

[image] Toeton: Is that what the element.style.setProperty() is for? This is the way to change value of the CSS variable. Where and how to use it? It must be called every time when the change of the (measured/readed) value is significant enough to make the change. As there's not much worklo…

[image] hotNipi: It must be called every time when the change of the (measured/readed) value is significant enough to make the change. As there's not much workload, it is safe enough to call it every time when the actual value changes. There is some sort of freedom where you define the CSS vari…

You define CSS variable for ":root" :root is a pseudo-class that targets this top-level <html> element. Refference in Javascript to that element is document.documentElement So the syuntax is document.documentElement.style.setProperty("--svg-fill-color", this.speedcolors())

So in your example document. is similar to :root in as it refers to the top-level, documentElement. refers to the specific element. You wrote the setProperty() value as this.speedcolors(). My understanding is that this. is used in a function to refer to itself, is that correct?

It'll be better for world if I don't try to explain the this in JavaScript. There are tons of free to read documents to examine. I saw the function you try to use, it does return color so it should work. But there's a lot of things what can be wrong. I'm really bad on blind debugging.

This is what I've got so far <script> export default{ data(){ return { //define me here min:0, max:100, label:"Gusts", measurement:"Speed", unit:"MPH", majorDivisi…

Thank you! - that did it! I had tried adding a :style="" but inserted it in the text element. I didn't try it in the <svg line. For any one who wants the gauge with a color value text, here is the code in its entirety: <script> export default{ data(){ return { …

Node-RED

Node-RED Forum

SVG element, dynamic color change - Need help

Dashboard

TotallyInformation 21 October 2026 10:33 3

Maybe also check out this forum post:

Topic		Replies	Views
Gauge's for Dashboard 2.0 made with ui_template Dashboard dashboard-2	159	7614	7 October 2025
Gauge Node Color fixing Dashboard	15	2851	16 August 2021
Dynamic CSS changes in Dashboard V3beta Share Your Projects node-red-dashboard	0	1151	10 September 2021
How to change svg circle attribute based on msg.payload and msg.topic? Dashboard	12	1810	27 November 2019
Change needle color in gauge Dashboard	2	552	25 April 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

SVG element, dynamic color change - Need help

Related topics