Skip to Content
Author's profile photo Former Member

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:


  1. A line chart whose color changes with its slope
  2. A label whose label changes color based on some value
  3. 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

/wp-content/uploads/2013/05/x_tt12_11_217621.jpg

  • 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):

/wp-content/uploads/2013/05/eqns1_217658.png

(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:

/wp-content/uploads/2013/05/eqns2_217659.png

And you’re done!

Next Steps

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.


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Harshil Joshi
      Harshil Joshi

      Good Job Alex Yale.

      Thanks for ℹ ➕

      🙂