Powered by AppSignal & Oban Pro

Hover Text on Bubble Charts

39_hover_text_on_bubble_charts.livemd

Hover Text on Bubble Charts

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

Section

Use text: as a list of strings and hoverinfo: "text" to show only custom labels on hover. HTML <br> works inside hover strings.

alias Plotly.{Figure, Scatter}

Figure.new()
|> Figure.add_trace(
  Scatter.new(
    x: [1, 2, 3, 4],
    y: [10, 11, 12, 13],
    mode: "markers",
    text: [
      "A<br>size: 40",
      "B<br>size: 60",
      "C<br>size: 80",
      "D<br>size: 100"
    ],
    hoverinfo: "text",
    marker: %{size: [40, 60, 80, 100]}
  )
)
|> Figure.update_layout(title: "Hover Text on Bubble Charts")
|> Plotly.show()