A Single Angular Gauge Chart

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

Section

An angular gauge uses mode: "gauge+number". gauge.axis.range: [min, max] sets the scale. delta.reference: shows the change from a baseline value. nil as the lower bound lets Plotly auto-determine it (equivalent to JS null).

alias Plotly.{Figure, Indicator}

Figure.new()
|> Figure.add_trace(
  Indicator.new(
    mode: "gauge+number",
    value: 450,
    title: %{text: "Speed"},
    delta: %{reference: 400},
    gauge: %{axis: %{range: [nil, 500]}},
    domain: %{x: [0, 1], y: [0, 1]}
  )
)
|> Figure.update_layout(width: 600, height: 400)
|> Plotly.show()