Question about making opacity to a colorscale

plotly.js
1

Hi,
I’m currently making a heatmap. I saw examples assign colorscale like’ colorscale: “Reds”’.
However, I now want to assign the colorscale in one particular color with various opacity.
For example, if I assign the color to be (255,177,44,0), my expecting colorscale is this color with various opacity. How can I do this?
Thanks a lot!

2

Hope someone would help me . Thanks !

3

Do you mean actual opacity (translucent to red) or a color scale ranging from white to red, where you can choose the exact shade for each step?

4

I mean translucent to red, the actual opacity. Thanks!

5

Got it. Have you tried “rgba(#, #, #, 0.5)” and adjusting that last argument for opacity?

6

Oh I see. But how to make it into a ‘colorscale’ that will automatic assign opacity to different values? Let’s assume using it in a heatmap.

7

To create a custom colorscale you have to create a list of lists where each pair of list item has the format of : [begining_bin_point , color], [ending_bin_point , color]

So if you have five colors that you want to distribute evenly, it would be:

colorscale=[
    [0.0, color_1],
    [0.2, color_1],

    [0.2, color_2],
    [0.4, color_2],

    [0.4, color_3],
    [0.6, color_3],

    [0.6, color_4],
    [0.8, color_4],

    [0.8, color_5],
    [1.0, color_5],
]

And for your case, you could make each color a rgba value in string format!

Reference: https://plot.ly/python/colorscales/

8

Whoops, that is the answer for python, but it is quite similar in javascript. The only difference is that you don’t have to provide the end_bin_point, just the start.

Reference: https://plot.ly/javascript/colorscales/

9

Yes. I combine your answer and lizzi’s and it helps! Thank you!

1 Like
10

I combine yours with mbkupfer’s answer and it works! Thank you!

1 Like
11

Can we have this happen automatically corresponding to the opacity of the trace in question? Set the opacity of the colorscale to match the opacity of the trace.