Pop up display options or alternatives

[Hels77]

HI, I am trying to re-create this in an EB pop up

So far the best I can do is this kind of thing.

Its not ideal as we want the whole year in one row.
Just checking to see if anyone has a better idea.
We have over 100 points that require this data to be displayed.

Thanks!

[JenniferAcunto]

You can create your desired style using the Arcade Content Block and HTML. 

Arcade Content Block

// Set Colors
var redColor = '#941B0C'
var orangeColor = '#F08A4B'
var greenColor = '#3E5641'

var txtColorLight = "#FFF";
var txtColorDark = "#000";

function colorMonth(mon){
  return (When(mon < 0, [txtColorLight, redColor], mon < 5, [txtColorDark, orangeColor], [txtColorLight, greenColor]))
}

// Apply colors
var jan = colorMonth($feature.Jan_TMIN_C)
var feb = colorMonth($feature.Feb_TMIN_C)
var mar = colorMonth($feature.Mar_TMIN_C)
var apr = colorMonth($feature.Apr_TMIN_C)
var may = colorMonth($feature.May_TMIN_C)
var jun = colorMonth($feature.Jun_TMIN_C)
var jul = colorMonth($feature.Jul_TMIN_C)
var aug = colorMonth($feature.Aug_TMIN_C)
var sep = colorMonth($feature.Sep_TMIN_C)
var oct = colorMonth($feature.Oct_TMIN_C)
var nov = colorMonth($feature.Nov_TMIN_C)
var dec = colorMonth($feature.Dec_TMIN_C)


// Build HTML
var html = `<div style="display:flex; justify-content:space-evenly; gap: 3px;">

<div style="background-color:${jan[1]}; color: ${jan[0]}; padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Jan</p>
</div>

<div style="background-color:${feb[1]}; color: ${feb[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Feb</p>
</div>
  
  <div style="background-color:${mar[1]}; color: ${mar[0]};   padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Mar</p>
</div>

<div style="background-color:${apr[1]}; color: ${apr[0]};   padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Apr</p>
</div>
  
  <div style="background-color:${may[1]}; color: ${may[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>May</p>
</div>

<div style="background-color:${jun[1]}; color: ${jun[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Jun</p>
</div>
  
  <div style="background-color:${jul[1]}; color: ${jul[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Jul</p>
</div>

<div style="background-color:${aug[1]}; color: ${aug[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Aug</p>
</div>
  
 <div style="background-color:${sep[1]}; color: ${sep[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Sep</p>
</div>

<div style="background-color:${oct[1]}; color: ${oct[0]};   padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Oct</p>
</div>
  
  <div style="background-color:${nov[1]}; color: ${nov[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Nov</p>
</div>

<div style="background-color:${dec[1]}; color: ${dec[0]};  padding:3px; border-radius: 5px; display:flex; justify-content:center;">
  <p>Dec</p>
</div>
  
</div>`

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

You may need to adjust the sizing a bit, but that should get you on the right path. 

Introducing Arcade pop-up content elements

ArcGIS Arcade/Function Reference

[Hels77]

Jen this is great! I only just read your post, will give it a go right now.
Thank you!