Powered by AppSignal & Oban Pro

Basic Bullet Charts

32_basic_bullet_charts.livemd

Basic Bullet Charts

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

Section

A bullet chart uses gauge: %{shape: "bullet"} on an Indicator trace. It renders as a compact horizontal bar, useful for dashboards. mode: "number+gauge+delta" displays the numeric value, bullet bar, and delta from the reference.

alias Plotly.{Figure, Indicator}

Figure.new()
|> Figure.add_trace(
  Indicator.new(
    mode: "number+gauge+delta",
    value: 220,
    title: %{text: "Profit"},
    delta: %{reference: 200},
    gauge: %{shape: "bullet", axis: %{range: [nil, 300]}},
    domain: %{x: [0, 1], y: [0, 1]}
  )
)
|> Figure.update_layout(width: 600, height: 250)
|> Plotly.show()