How to use gradient color

I want to change the background color of a label based on the temperature. How can I do this?

For example, I want the color to be different when the temperature is 30 and when it’s 50, like the colors that appear in the image.

Please tell me how to achieve this.

Set the background-image to the following:

linear-gradient(339deg, rgba(0,22,255,1) 0%, rgba(0,255,244,1) 25%, rgba(254,255,0,1) 75%, rgba(0,0,0,1) 100%)

1 Like

Use hsl. This makes things SO much easier in cases like this.

in hsl, red is 0, blue is ~240.
let's use farenheit for the example, and map 0°f to hsl 240, 100°f to hsl 0.

make a label, and put a custom property on it. Let's call it "temp" (you should probably pick a better name, to reflect that it represents a hue, but I didn’t think it through and called it temp).
Put an expression binding on this custom prop, that will look like this:
240 - (240 * ({../Slider.props.value} / 100))

I used a slider to test it, replace it with your actual temperature source (probably a tag).

Now add a backgroundColor style to your label, and put an expression binding on it as well.
The expression should look like this:
'hsl(' + {this.custom.temp} + ', 50%, 50%)'

You'll have to adapt the values in the temp expression to match the unit and range, or maybe even the formula to change the curve,
and you can also play on the saturation and lightness in the hsl function to get the result you want.

image

image

image

Noah, I made the same mistake on first reading: the question isn't how to generate the heat scale, it's how to pick a color from the scale to apply to various labels on the view so that, for example, any reading about 45°C will have yellow background.

1 Like

Huh I didn’t pay attention, didn’t even see there were values on that heat scale.
I would have used Celcius and the same range…

A simple option but not as flexible is to use a map transform on the label background.

It will give an abrupt change in color at certain points.
Disadvantages:

  • Abrupt color change.
  • If you want to adjust the range (20° to 60° in your example) then you'd have to edit all the color maps. This would be a bit painful.
    The Map input type does take an expression so you could reference some temperature limits to determine which band you're in. I didn't try it.

based on the condition control code of expression
such as case