Powered by AppSignal & Oban Pro

Data Labels Hover

02_data_labels_hover.livemd

Data Labels Hover

Mix.install([
  {:plotly_ex, "~> 0.3"},
  {:kino, "~> 0.18"}
])

Section

Pass a text list to a scatter trace to add custom labels to each point. By default these appear in the hover tooltip. Use hoverinfo: "text" to show only the custom text (hiding x/y values).

alias Plotly.{Figure, Scatter}

Figure.new()
|> Figure.add_trace(
  Scatter.new(
    x: [1, 2, 3, 4, 5],
    y: [1, 6, 3, 6, 1],
    mode: "markers",
    marker: %{size: 20, color: ["rgb(93,164,214)", "rgb(255,144,14)",
                                "rgb(44,160,101)", "rgb(255,65,54)", "rgb(207,114,255)"]},
    text: ["A<br>size: 40", "B<br>size: 60", "C<br>size: 80", "D<br>size: 60", "E<br>size: 40"],
    hoverinfo: "text"
  )
)
|> Figure.update_layout(
  title: "Data Labels on Hover",
  xaxis: %{range: [0, 6]},
  yaxis: %{range: [0, 8]}
)
|> Plotly.show()