title: How to add legend to plotly graph_objects plot that describes the colors, not traces?
body: <p>I would like to have a legend on the right side of my plot that has 10 different color points &amp; (representing the 10 different clusters in the graph below). I've provided two lists before, one that contains the color of each point, and the other list contains the label of each point. So, I'd like for each color in the legend to also have the text corresponding to its label.</p>
  <pre><code>Color # of each image: 
  ['#1f77b4', '#1f77b4', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#ff7f0e', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#2ca02c', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#d62728', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#9467bd', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#c49c94', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#f7b6d2', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#c7c7c7', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#dbdb8d', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5', '#9edae5']
  Cluster # of each image: 
  [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9]
  
  from jupyter_dash import JupyterDash
  from dash import Dash, dcc, html, Input, Output, no_update
  import plotly.graph_objects as go
  import pandas as pd
  
  
  ## create sample random data
  df=interactive_df
  
  fig = go.Figure(data=[
      go.Scatter(
          x=df['x_lv'], #x_px and y_px for pixel data
          y=df['y_lv'], 
          mode='markers',
          marker=dict(color=df['color']), showlegend=True
      )
  ])
  
  fig.update_traces(marker=dict(size=9,
                                line=dict(width=2,
                                          color='DarkSlateGrey')),
                    selector=dict(mode='markers'))
  
  # turn off native plotly.js hover effects - make sure to use
  # hoverinfo=&quot;none&quot; rather than &quot;skip&quot; which also halts events.
  fig.update_traces(hoverinfo=&quot;none&quot;, hovertemplate=None)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qdEbX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qdEbX.png" alt="enter image description here" /></a></p>