Progress bar colors in new table

Feature Requests
1

Unless I'm missing something you can't change the colors of the progress bar column in the new table component. It has an option for positive trend and negative trend but you can't edit the sign/color. I am building an app where the progress bar actually represents capacity utilization... think memory or cpu usage. I'd like it to show red if it hits more than 90%, orange if over 70% and green under 70%. Currently it doesn't look like there is flexibility to do this, but seems like it wouldn't be too hard to add. Thanks.

1 Like
2

Nothing built in that I am aware of, but you may be able to achieve it with custom HTML. {{ progressBarValue.value }} in the code below = your dynamic value from whatever source.

  • Add a new HTML Component for Under 70% with this data:
<div style="width: {{ progressBarValue.value }}%; background-color: green; height: 20px;"></div>
  • In the inspector for the same new HTML component and under Appearance, find Hidden and input:

{{ progressBarValue.value < 70 }}

  • Repeat this process for the other values.

70-90%

<div style="width: {{ progressBarValue.value }}%; background-color: orange; height: 20px;"></div>

{{ progressBarValue.value >= 70 && progressBarValue.value <= 90 }}

Over 90%

<div style="width: {{ progressBarValue.value }}%; background-color: red; height: 20px;"></div>

{{ progressBarValue.value > 90 }}

1 Like
3

Hey folks!

Thanks for posting a reply here @vinnie, and props for tackling this with an HTML component. Just want to highlight some built-in Retool features that might help, though they aren't perfect:

I'll go ahead and file a request with the team to add more support for progress bar colors, in the meantime it looks as though you can classify each bar using the "Positive trend" and "Negative trend" thresholds:

From there, you target them with some custom CSS to have them be the colors you want. This gives you three categories:

  1. Below "Negative trend" threshold (CSS classes: ._cgnLr._9iakn)
  2. Between "Negative trend" and "Positive trend" thresholds (CSS class: ._cgnLr)
  3. Above "Positive trend" threshold (CSS classes: ._cgnLr._GuKyN)

This can be a bit counterintuitive since you need to have the negative trend threshold be strictly less than the positive trend threshold in order to get three distinct cases, and that might not make sense with your use case. But with some brain-bending you can hopefully get something like what you're looking for:

For the standalone progress bar component, it's possible to define the fill color with a ternary that checks the value of the component, e.g. something like {{self.value < 70 ? theme.success : self.value < 90 ? theme.warning : theme.danger}}:

1 Like