Thresholds in Plotly js

plotly.js
1

Hi i am new to Plotly and i am trying to implement thresholds that will fill the graph depending on less than or greater than the threshold value. The less than is quite straight forward however i am having issues with the current way i am doing the greater than aspect.
This is an example of my trace:

(
       {
        name: 'top',
        mode: 'lines',
        line: {
          shape: 'spline',
          color: 'rgba(0,0,0,0)'
        },
        y: Array(100).fill(max),
        showlegend: false
      },
      {
        name: name,
        mode: 'lines',
        fill: 'tonexty',
        fillcolor: fillColor,
        line: {
          color: lineColor,
          width: line,
        },
        x: Array(100).fill(0).map((x, y) => (x + y)),
        y: Array(100).fill(value),
        showlegend: false
      }         
    )

I was wondering if there was an alternate way of doing this? I seen ‘Infinity’ being used in other library’s and i noticed that there is a variable named ‘Infinity’ in Plotly.js, can i use this? Any help would be great.

2

I’d recommend using layout shapes for this tasks. https://plot.ly/javascript/shapes/#highlighting-time-series-regions-with-rectangle-shapes should help get started.

3

Hi @etienne thank you for your response, i have looked at this before, however s there any way to specify 'fill: ‘tonexty’ as the top of the graph

4

We don’t support fill to infinity at the moment.