Dynamic line color in chart

πŸ’¬ App Building
1

Hi all,

I'm trying to change the color of a chart line depending on the value of the series (positive > green, negative > red.)

I assume there would be some complicated ways to do so with custom JSON plotly chart and so on but I was just wondering if there was an easier way just like with buttons and cells.

Something like:

{{self.series[4].yData > 0 ? "3170F9" : "7f11e0" }}

Here's a screenshot:

image
image1360Γ—768 115 KB

Any idea if such a thing is possible?

B

3

Hi everyone,

Curious to know if you think that's something doable?

B.

4

Hey @Baptiste_LC ! Unfortunately chart line colors accept a single color. You could split your dataset into two series, and have a single series of one color for all values below 0, and then another series for a color for all values above 0.

Right now only marker values can accept an array

5

Thanks cody!

Thought of that but then the line won't be full but broken in two unless one of the values by chance is zero.

Thanks anyway for the suggestion!

B

6

I had a similar issue and solved it with custom CSS code (which sounds more complex than what it realy is).

See this thread for details:

1 Like
7

Thanks!

Did you paste that javascript in the broad custom css of the Retool app or via the custom css of a plotly chart component?

8

Neither. I've used the app settings -> Custom CSS, so it is specific for each app, and not global for all Retool apps

image
image1017Γ—515 50 KB

9

Thanks!

So to make sure I get it, on your example is getWaterfallData a chart or an array/object that is storing the values that you're displaying on the chart?

(sorry if this question is silly).

So I first tried this:

image
image1038Γ—436 104 KB

With the name of my chart instead of getWaterfallData but there was a scoping issue as seen in the error message.

So I tried with a global array that is storing the values instead, which does not show any error message, but won't change anything on the graph. And also that makes sense to me because with the following script, I don't seen how the website could understand it has to change the values of the graph.

image
image1040Γ—505 113 KB

Also I tried this to be more specific but doesn't seem to work:

image
image1015Γ—456 47.6 KB

And to be clear, it is not the color of the bars that I want to change but the color of the line (blue on the previous pictures).

B.

10

Sorry for not being clear!

getWaterfallData is a transformer query that returns an array, with each entry having multiple properties (see below).


newArr.push ({
  year: "2024",
  category: "Ξ£ Invested",
  value: 100,
  measure: "absolute",
  color: "green",
  xtext: "Ξ£ Invested"
})

You will probably have to adjust to your use case. As for the line colors, I suggest you look at plotlyjs documentation, as the retool docs are not super great.

OP

1 Like
11

Thanks for your help!

So now everything is clearer for me. I would advice anyone that has little knowledge of code to inspect the html of the component they want to develop custom CSS for and ask ChatGPT or similar to write the custom CSS needed.

For the chart component more specifically, it seems that it is easy to change the color of markers depending on value, but much more difficult for lines where you need to create different traces. So I considered it was good enough with the following structure:

image

here's the custom css:

{{ Array.from({length: array_cash_fin_compare.value.length}, (_, i) =>
  `
  ._retool-chart_cash_compare g.trace.scatter path.point:nth-of-type(${i + 1}) {
    fill: ${array_cash_fin_compare.value[i].color} !important;
    stroke: ${array_cash_fin_compare.value[i].color} !important;
  }
  `).join('\n')
}}

B.

1 Like
12

Thanks so much for sharing this, @Baptiste_LC !