Changing line color/opacity in real time -- Javascript

plotly.js
1

I’m creating a real-time line chart with just one piece of data/one line needing to be shown. Each piece of data also comes with a ‘confidence’ rating, which I’d like to display by changing the opacity of the line at that mark. As well, I’d like to change the color of the line (maybe using a gradient) for certain certain ranges of data. For example, if the data is below 2, I’d like it to be a blue line. If its between 2-7, I’d like it to be a green line. From 7-10, I’d like it to be a red line.

We previously were using Matplotlib for our charting, but have switched to Plotly. I’ve included a link for an example of the line color changes implemented in Matplotlib so that you can understand what I’m talking about. I’ve scoured the internet trying to find info on how to implement this in Plotly and have been unsuccessful.

Thanks for any help you can provide!

https://matplotlib.org/gallery/lines_bars_and_markers/multicolored_line.html

2

Unfortunately, we don’t allow colorscales on lines at the moment. You can subscribe to https://github.com/plotly/plotly.js/issues/581 for the most up-to-date development info.

You can try splitting your data up into multiple (little) scatter line traces, but replicating the mpl example you posted will be difficult at the moment.