Dynamic colors for labels and charts (in 2 steps!)
Xcelsius already allows for dynamic coloring through the use of alerts. As powerful as that is, however, there are multiple cases where one would like a more powerful method to achieve dynamic colors. These include, for example:
- A line chart whose color changes with its slope
- A label whose label changes color based on some value
- A rectangle whose background color is dynamic
Here is a simple tutorial to make that happen. We will change the color of a text label from red to green using a horizontal slider in two very simple steps.
1. Add the component for which you want dynamic colours
For this example, we’ll change the color of a text label using a slider. So we’ll add:
- A text label; go to its font color and change the color to “Bind to a color”, and map this color to cell $B$2
- A horizontal slider, which we’ll use to change the font of the label dynamically. Set its value to B1, and its range from 0 to 100.
2. Write the Formulas
Add the formulas from the image blow. The formulas take the value from the slider (B1) and translate that into a color code (B2):
(click for zoomed-in view)
The cells B5:B7 convert the data into 3 numbers between 0 and 255, corresponding to the red, green, blue. Here, I defined the formulas so that 0=red and 100=green, with middle values interpolating between these two. Of course, you can replace these to anything you want. Cells C5:C7 simply convert those numbers into hexadecimal notation. Finally, B2 merges all values together into the final color string. Here’s what it looks like in action:
And you’re done!
This is of course only the beginning. It is straightforward to edit the formulas in B5:B7 to define any color gradient you want. In this example, I used only two colors (red and green) but this can be increased to any number you want.