topic Re: Fixing the formatting on the labels in ArcGIS Dashboard in ArcGIS Online Developers Questions

Fixing the formatting on the labels in ArcGIS Dashboard

nmp001 — Fri, 07 Jun 2024 17:15:46 GMT

Hi,

We are trying to build an ArcGIS Dashboard, yet having struggle with formatting the label. So far our On-Target and Off-Target look like below. As you can see, the on-target and off-target boxes are not centered, so do the "Off-Target" and "On-Target" texts and the tick and circle label:

nmp001_0-1717780331724.png

Eventually, we want to have the final output for On-Target/Off-Target labels look as follow in the ArcGIS Dashboard by Hawaii (https://alohachallenge.hawaii.gov/#HawaiiVLR):

nmp001_1-1717780474273.png

We are using the following HTML code to make the On-Target and Off-Target label in our Dashboard, not sure something wrong going on with the code:

<figure class="table" style="width:100%;">
<table style="background-color:#35ac46;color:#ffffff;font-size:16px;padding:0px;">
<thead>
<tr>
<th width="40">
<p>
 
</p>
<svg style="display:block;margin-left:auto;margin-right:auto;vertical-align:middle;" fill="#ffffff" height="18" id="ember25808" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M7.5 0C3.366 0 0 3.364 0 7.5S3.365 15 7.5 15c4.136 0 7.5-3.364 7.5-7.5S11.636 0 7.5 0zm.001 14C3.916 14 1 11.084 1 7.5S3.916 1 7.501 1C11.085 1 14 3.916 14 7.5S11.085 14 7.501 14z"></path><path d="M11.634 4.633L6.5 9.767 4.312 7.579l-.707.707L6.5 11.18l5.841-5.84z"></path></svg>
</th>
<th style="text-align:center;">
<p style="text-align:center;">
     On-Target
</p>
</th>
</tr>
</thead>
</table>
</figure>

Re: Fixing the formatting on the labels in ArcGIS Dashboard

JenniferAcunto — Mon, 10 Jun 2024 12:04:53 GMT

You can use the browser Dev Tools to find the Aloha Dashboard HTML:

<div style="align-items:center; background-color:#87c99c; display:flex; margin-bottom:1.5%; margin-left:1.5%; margin-right:1.5%; margin-top:1.5%; padding:4%; vertical-align:middle"><svg height="15.72" viewBox="0 0 19.16 15.72" width="19.16" xmlns="http://www.w3.org/2000/svg"> <path d="M17.84,3.458,6.863,14.418a1.222,1.222,0,0,1-.94.3,1.282,1.282,0,0,1-.869-.3L.319,9.682a1.113,1.113,0,0,1,0-1.561L1.9,6.543a1.062,1.062,0,0,1,.78-.319,1.062,1.062,0,0,1,.78.319l2.5,2.5L14.7.319a1.113,1.113,0,0,1,1.561,0L17.84,1.88a1.134,1.134,0,0,1,0,1.578Z" fill="#00675c" id="checkmark" stroke="rgba(0,0,0,0)" stroke-width="1" transform="translate(0.5 0.5)"></path> </svg> <h3 style="font-size:1rem; margin-left:2%; padding:2%; text-align:left"><strong>On track</strong></h3> </div>

Then tweak it to reflect your desired changes:

<div style="align-items:center; background-color:#35ac46; color:#ffffff; display:flex; margin-bottom:1.5%; margin-left:1.5%; margin-right:1.5%; margin-top:1.5%; padding:4%; vertical-align:middle"><svg fill="#ffffff" height="15.72" viewBox="0 0 19.16 15.72" width="19.16" xmlns="http://www.w3.org/2000/svg"> <path d="M7.5 0C3.366 0 0 3.364 0 7.5S3.365 15 7.5 15c4.136 0 7.5-3.364 7.5-7.5S11.636 0 7.5 0zm.001 14C3.916 14 1 11.084 1 7.5S3.916 1 7.501 1C11.085 1 14 3.916 14 7.5S11.085 14 7.501 14z"></path><path d="M11.634 4.633L6.5 9.767 4.312 7.579l-.707.707L6.5 11.18l5.841-5.84z"></path> </svg> <p style="font-size:16px; margin-left:2%; padding:2%; text-align:left"><strong>On-Target</strong></p> </div>

JenniferAcunto_0-1718021063166.png

Re: Fixing the formatting on the labels in ArcGIS Dashboard

nmp001 — Wed, 12 Jun 2024 18:24:36 GMT

Hi Jennifer,

Thanks a lot for helping! It is really useful.

There is another issue that we have not figured out. The font size of our main texts (the numbers such as 2.8 or 37.9) as well as the middle text below the main texts are not consistent across indicators. I already set the same font sizes for them across indicators, but Idk why it still look inconsistent eventually.

nmp001_3-1718216668270.png

nmp001_1-1718216571617.png

Hawaii dashboard, however, manage to have the same font size across indicators

nmp001_2-1718216593337.png

Re: Fixing the formatting on the labels in ArcGIS Dashboard

JenniferAcunto — Wed, 12 Jun 2024 19:07:29 GMT

It's important to understand how the 'font size' works in Dashboards. You are not selecting the exact size the font will be, but the largest size it can be. This is to ensure that your indicator text doesn't get cut off at different screen sizes. If you set your size to Large, indicators with smaller text can probably be that large size, but indicators with a lot of text can probably only be small or medium before text is cut off. That is why the sizes look different.

JenniferAcunto_0-1718218631995.png

The best way to ensure your indicators font sizes are as consistent as possible, is to select the largest size that works for all of your data. So for my example above, the '888,888,888,888 can probably only work at a medium font size. So, I would limit all my indicators to have a max size of medium.

JenniferAcunto_1-1718219087214.png