Scatter graph with "limits" for data

plotly.js
1

Hello,
I’ve started using Plotly very recently for displaying data - works very well for me so far.
What I would like to do is create a Scatter plot (no fit line) but with limits displayed on the graph. For example, if I have a series of data, and the pass/fail limits are average +/- 10%, I would like a horizontal line displaying at the average +10% and average -10% levels (these I can obviously calculate, I’m not expecting Ployly to do this part).
What I would then like is that if the data point is within the limits, it displays in one colour (eg, GREEN) and if it is outside of the limits, it displays in another colour (eg, RED).

Is this possible?

I worked out that my adding a second and third data range to my plot with the same ‘x’ values as the actual data series I want to plot, and all the ‘y’ values set to the limit values, I could get the horizontal lines to display… but couldn’t work out how to change the colour of the plotted data points in my actual data series based on the value.

Any thoughts? or am I asking too much?

Thanks

2

HI @colin.slater , welcome to the forums.

I’m aware that I’m responding in python even though the question is tagged with JS, but the basic principle is the same. Maybe it helps:

import plotly.graph_objects as go
import numpy as np


# create dummy data
mean = 3.0
std = 0.5

x = np.arange(1000)
y = np.random.normal(loc=mean, scale=std, size=1000)

# map colors to markers
colors = ['red' if not 0.9*mean<= val <=1.1*mean else 'green' for val in y]

# create figure
fig = go.Figure(
    go.Scatter(
        x=x, 
        y=y, 
        mode='markers', 
        marker={
            'color': colors, 
        }
    )
)

# add horizontal lines
fig.add_hline(y=0.9*mean, line={'dash': 'dash', 'color': 'gray'})
fig.add_hline(y=1.1*mean, line={'dash': 'dash', 'color': 'gray'})

newplot (4)
newplot (4)694×360 31.3 KB

mrep discrete colors