Change text color based on value/label using Arcade

[dwold]

In my pop-up, I'd like to have the text correspond with the map symbology color. Any suggestions on how to do so? I tried the following below with no success:

[KenBuja · Accepted solution]

There are a couple of ways to do that. The original way is outlined in this blog.

The more modern way is to use the Arcade element, which allows you to use HTML tags directly. I've simpified your code, using the When function (replacing all the ifs) and template literals.

var r1 = $feature.["Risk_Level"];
var output = When(r1 == 0, "Lowest",
                  r1 < 2, `<p style=color:rgb(142,211,231)>Very low</p>`,
                  r1 < 3, `<p style=color:rgb(89,184,98)>Low</p>`,
                  r1 < 4, `<p style=color:rgb(255,255,63)>Moderate</p>`,
                  r1 < 5, `<p style=color:rgb(254,166,32)>High</p>`,
                  r1 < 6, `<p style=color:rgb(252,56,57)>Very high</p>`,
                  `<p style=color:rgb(205,0,103)>Highest</p>`)

return { 
	type : 'text', 
	text : output //this property supports html tags 
}

Note: when posting code, using an image makes it more difficult for us to copy and paste to give an answer. Instead, use the Insert/Edit code sample icon

[dwold]

@KenBuja Thank you!!!

[dwold · Accepted solution]

@KenBuja do you see anything I am missing in the code?

this my pop-up:

var r1 = $feature["Risk_Level"];
var output = When(r1 == 0, "Lowest",
                  r1 < 2, `<p style=color:rgb(142,211,231)>Very low</p>`,
                  r1 < 3, `<p style=color:rgb(89,184,98)>Low</p>`,
                  r1 < 4, `<p style=color:rgb(255,255,63)>Moderate</p>`,
                  r1 < 5, `<p style=color:rgb(254,166,32)>High</p>`,
                  r1 < 6, `<p style=color:rgb(252,56,57)>Very high</p>`,
                  `<p style=color:rgb(205,0,103)>Highest</p>`)

return { 
	type : 'text', 
	text : output //this property supports html tags 
}

I also tried this with no luck:

var r1 = $feature["Risk_Level"];
var output = When(r1 == 0, "Lowest",
                  r1 < 1, `<p style=color:rgb(142,211,231)>Very low</p>`,
                  r1 < 2, `<p style=color:rgb(89,184,98)>Low</p>`,
                  r1 < 3, `<p style=color:rgb(255,255,63)>Moderate</p>`,
                  r1 < 4, `<p style=color:rgb(254,166,32)>High</p>`,
                  r1 < 5, `<p style=color:rgb(252,56,57)>Very high</p>`,
                  r1 < 6, `<p style=color:rgb(205,0,103)>Highest</p>`)

return { 
	type : 'text', 
	text : output //this property supports html tags 
}

[KenBuja · Accepted solution]

You have to add this code to a Arcade element

[JasminePrater]

I'm trying to do something similar, except I want the HydrantID field to be the label where it turns red if Public and yellow if Private.  The Public or Private information is in the Owner field.  Is that something that can be done with modifications to this code?

[ctalleygreenville]

Thank you Ken, this is very helpful.