Powered by AppSignal & Oban Pro

Add Steps, Threshold, and Delta

30_add_steps_threshold_and_delta.livemd

Add Steps, Threshold, and Delta

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

Section

gauge.steps: adds colored bands to the gauge arc — each step is %{range: [lo, hi], color:}. gauge.threshold: draws a marker line at a specific value: %{line: %{color:, width:}, thickness:, value:}. delta.reference: shows the change from a baseline value.

alias Plotly.{Figure, Indicator}

Figure.new()
|> Figure.add_trace(
  Indicator.new(
    mode: "gauge+number+delta",
    value: 450,
    title: %{text: "Speed"},
    delta: %{reference: 380},
    gauge: %{
      axis: %{range: [nil, 500]},
      steps: [
        %{range: [0, 250], color: "lightgray"},
        %{range: [250, 400], color: "gray"}
      ],
      threshold: %{
        line: %{color: "red", width: 4},
        thickness: 0.75,
        value: 490
      }
    },
    domain: %{x: [0, 1], y: [0, 1]}
  )
)
|> Figure.update_layout(width: 600, height: 400)
|> Plotly.show()