How To: Conditional line colors in Plotly Bar Graph

I wanted to share a step-by-step guide for a solution I came up with so that you can have more than one line/bar color in a Plotly graph -- where each line can be assigned a different color given that a specified 'threshold' or 'baseline' isn't met.

What you will need to set this up:

  1. Data source/query w/ your array of x / y values (and a baseline/threshold for each 'y' value, if it's not a static baseline/threshold)
  2. Transformer to manipulate the series in our graph data
  3. Just a little custom CSS added under your App Settings tab

Once you have pulled in your data source, you will need to display it within your graph component. Then, within your transformer, you will be using the graph.series[0] data to manipulate the color options for the lines in your graph and to pull in/set your threshold.

I set up my transformer to have the ability to return as many other graph series as you may require, i.e. if you have multiple graphs in your app. All you need to do is add each series from each graph map to graphMap, and to set a baseline/threshold for that graph in your thresholds like how I have set it up below:

If you set up your entries correctly like in the above example, it should return a script that points to the HTML attribute that provides a value to your fill color for each graph. We use 'index' in our iterations so we can target each child element with a path -- the path element is the container for each line in your bar graph.

Then, in the custom CSS section of your App Settings in your Retool app, target the graph component with the data-testid attribute, and w/ a little attribute selection via substring matching, insert the component name of whatever it is you called your graph component, i.e. ebitGraph for my example below:

And voila!!! Intuitive plotly bar graph where you can conditionally set an array of color options depending on a specified threshold/baseline amount :slightly_smiling_face:

Happy coding Retoolers! :technologist:

1 Like