Tag Color not changing in table


As you can see in my screenshot, I have a column that's set up as Tag as the type and colors to be chosen automatically. AND I have some repeating values in that column, but they are all the same color, when there should be two different colors (one each for Contractor and Referral). No idea why these each wouldn't be a different color though.

Thanks.


Note that I tried using the same data source straight into a tags component and got basically the same thing.


And now I've tried just manually creating an array and Retool seems to assign different colors to some strings, but not others :man_shrugging:

hello @hess411!

automatic tag color assignment uses a deterministic hash to ensure a string is always assigned the same color. here's the actual code from our codebase:

const getColorFromCollection = (value: string | number, colors: string[]): string => {
  const numColors = colors.length
  if (typeof value === 'number') {
    return colors[value % numColors]
  }

  value = value.toLowerCase()

  let hash = 0
  for (let i = 0; i < value.length; i++) {
    const charCode = value.charCodeAt(i)
    hash = (hash << 5) - hash + charCode
    hash = hash & hash
  }

  return colors[Math.abs(hash) % numColors]
}

while this works and ensures deterministic assignment, it's not uncommon for different strings to be assigned the same color due to the limited set of automatic colors in the default theme. if you have access to the Themes feature, you can configure more automatic colors by adding them to this list:

otherwise I would recommend not using automatic assignment, and instead configure your Tag colors using an option list or a color mapper. here are two examples of how those could be configured:

2 Likes