title: Plotly: How to display different color segments on a line chart for specified thresholds?
body: <p>I have a multi-line graph that displays percent increase over time. I'd like to set a threshold in my code to have an upper and lower bound. If the line falls outside these bounds, I'd like that specific part of the line graph to be a different color than its parent.</p>
  <p><strong>This is what I am doing:</strong></p>
  <pre><code>import plotly.express as px
  import plotly.graph_objects as go
  
  
  
  fig = px.line(df14, x = &quot;Date&quot;, y = &quot;Percent&quot;, color = &quot;id&quot;, 
            title = &quot;id Growth in Percentage (US)&quot;, 
            labels = {&quot;Percent&quot;: &quot;Percent Growth&quot;})
  
  fig.update_layout(
  font_family=&quot;Arial&quot;,
  font_color=&quot;black&quot;,
  title_font_family=&quot;Arial&quot;,
  title_font_color=&quot;black&quot;,
  legend_title_font_color=&quot;black&quot;                                           #style the text (legend, title etc)
  )
  
  
  fig.update_xaxes(title_font_family=&quot;Arial&quot;)                               #style ance center title
  fig.update_layout(
  title={
      'text': &quot;id Growth Percentage in US (Line Graph)&quot;,
      'y':0.9,
      'x':0.5,
      'xanchor': 'center',
      'yanchor': 'top'})
  
  
  fig.update_traces(mode='markers+lines')                                    #add dots to line
  
  fig.show()
  </code></pre>
  <p><strong>This is the visual result:</strong></p>
  <p><a href="https://i.stack.imgur.com/N6GDx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N6GDx.png" alt="![image|690x328](upload://hujUQbdPtbCAiXQoTTwLmzAAi02.png)" /></a></p>
  <p><strong>Let me zoom in on one line to better explain:</strong></p>
  <p>I would like a <strong>threshold set for each id</strong>, and <strong>if the line goes above or below this threshold, the color will be different for that part of the line</strong> graph. For instance:</p>
  <p><strong>The upper bound for id IAA may be 5 and the lower bound for IAA may be 0.</strong>
  Any value that is over 5 , or below 0, show be highlighted a specific color.</p>
  <p><strong>The upper bound for id SSS may be 10 and the lower bound for SSS may be 3</strong>
  Any value that is over 10, or below 3, should be highlighted a specific color.</p>
  <p><strong>I am wanting the thresholds to be for each id</strong></p>
  <p>Please see below:</p>
  <p><a href="https://i.stack.imgur.com/hGM1G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGM1G.png" alt="enter image description here" /></a></p>
  <p>The highlighted yellow parts of the line reflect where the line graph has exceeded or decreased a set threshold. Is this possible to do this using Plotly?</p>
  <p><strong>Here is the raw data example:</strong> <strong>Updated:</strong></p>
  <pre><code>    id       Start      End         Diff        Percent     Date        
      IAA     4/1/2019    5/1/2019    160.4279    11.10809    04-01-2019 to 05-01-2019
      IAA 5/1/2019    6/1/2019    136.0248    8.476798    05-01-2019 to 06-01-2019
      IAA     6/1/2019    7/1/2019    174.0513    9.998946    06-01-2019 to 07-01-2019
      IAA     7/1/2019    8/1/2019    112.0424    5.851551    07-01-2019 to 08-01-2019
      IAA     8/1/2019    9/1/2019    141.8488    6.998691    08-01-2019 to 09-01-2019
      IAA     9/1/2019    10/1/2019   103.5522    4.774984    09-01-2019 to 10-01-2019
      IAA     10/1/2019   11/1/2019   125.6087    5.528085    10-01-2019 to 11-01-2019
      IAA     11/1/2019   12/1/2019   145.2591    6.058016    11-01-2019 to 12-01-2019
      IAA     12/1/2019   1/1/2020    115.5121    4.542251    12-01-2019 to 01-01-2020
      IAA     1/1/2020    2/1/2020    185.7191    6.985673    01-01-2020 to 02-01-2020
      IAA     2/1/2020    3/1/2020    126.7386    4.455896    02-01-2020 to 03-01-2020
      IAA     3/1/2020    4/1/2020    231.3461    7.786734    03-01-2020 to 04-01-2020
      IAA     4/1/2020    5/1/2020    97.02587      3.02981   04-01-2020 to 05-01-2020
      IAA     5/1/2020    6/1/2020    42.85235      1.298792  05-01-2020 to 06-01-2020
      IAA     6/1/2020    7/1/2020    124.666    3.729997     06-01-2020 to 07-01-2020
      IAA     7/1/2020    8/1/2020    357.9974    10.32609    07-01-2020 to 08-01-2020
      IAA     8/1/2020    9/1/2020    490.9587      12.8358   08-01-2020 to 09-01-2020
      IAA     9/1/2020    10/1/2020   204.5478    4.739428    09-01-2020 to 10-01-2020
      IAA     10/1/2020   11/1/2020   287.6025    6.362292    10-01-2020 to 11-01-2020
     SSStest  4/1/2019    5/1/2019    12.38486    5.780551    04-01-2019 to 05-01-2019
     SSStest  5/1/2019    6/1/2019    -2.61735    -1.15487    05-01-2019 to 06-01-2019
     SSStest  6/1/2019    7/1/2019    -5.6187    -2.50814     06-01-2019 to 07-01-2019
     SSStest  7/1/2019    8/1/2019    3.204252    1.467153    07-01-2019 to 08-01-2019
     SSStest  8/1/2019    9/1/2019    -25.3782    -11.4521    08-01-2019 to 09-01-2019
     SSStest  9/1/2019    10/1/2019   -10.9717    -5.59137    09-01-2019 to 10-01-2019
  </code></pre>
  <p>Any suggestions is appreciated</p>
  <p><strong>Update</strong></p>
  <p>Is there a way to make the full line display the marker dots on them?
  I have tried this: mode = 'markers+lines' but did not get the desired result:</p>
  <pre><code>**Update, I have figured this out:** 
  fig.update_traces(mode='markers+lines')    
  </code></pre>
  <p><a href="https://i.stack.imgur.com/AxNE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AxNE9.png" alt="enter image description here" /></a></p>
  <p><strong>Updated Question:</strong></p>
  <p>Also,is there a way to add the Date and Percent titles on the hover annotation here?. I am researching the Plotly docs.</p>
  <p>[![enter image description here][4]][4]</p>