Display a prominent current metric with optional prefix or suffix.
Dashboard KPI cards
Plotly · Class
go.Indicator
go.Indicator visualizes one value as a number, delta, gauge, or combination. Its mode selects the rendered components, while related settings control comparison, formatting, and placement.
How it works
Constructs a Plotly indicator trace that visualizes one value. The selected mode controls whether the trace renders a number, a delta against a reference, a gauge, or a combination; layout positioning is supplied through the domain.
Syntax
go.Indicator(arg=None, alignmentgroup=None, autorange=None, ...)Parameters
| Name | Type | Description |
|---|---|---|
value | number | The value to visualize. |
mode | string | Specifies which visual elements to draw, including number, delta, and gauge. |
delta | object | The number to compare value with when displaying a delta. |
gauge | object | Configuration for the gauge visualization. |
domain | object | Positioning information for the indicator. |
title | object | Text displayed as the indicator title. |
Returns
A Plotly Indicator trace object.
Key points
- Each indicator is centered on one value supplied through value.
- The trace supports three visual components: a number, a comparison delta, and a gauge.
- Use prefix to place text before a displayed number or delta.
- Use suffix to append units or other text after the number or delta.
Common mistakes
- The displayed elements are controlled by mode, so omitting a component from that value prevents it from being rendered.
- A delta requires a meaningful reference value; it is not an independent second measurement.
Example: Gauge indicator with number and delta
import plotly.graph_objects as go
fig = go.Figure(go.Indicator(
mode="gauge+number+delta",
value=450,
delta={"reference":400},
title={"text":"Speed"},
gauge={"axis":{"range":[None,500]}}
))
fig.show()Creates one indicator showing a numeric value, its difference from a reference, and a gauge.
When to use it
Show a value alongside its difference from a reference.
Target tracking
Represent progress toward a goal with a radial or bullet-style gauge.
Progress monitoring
Position several indicators within one figure using domains or grid locations.
Compact multi-metric layouts
Interview questions
QWhat is go.Indicator used for?
go.Indicator is a trace for visualizing one value. It can render a number, a delta, a gauge, or any combination of those elements selected through mode.
Follow-up: How would you show progress toward a target? Add a gauge and set delta.reference to the target value, then choose an appropriate gauge range.
QHow do value and mode work together?
The value attribute supplies the single value being displayed, while mode determines which visual components appear. For example, gauge+number renders both a gauge and the numeric value.
Follow-up: How can the displayed value be labeled? Configure title, and use number.prefix or number.suffix when text must appear directly beside the number.
QWhat does the delta component represent?
delta compares value with a reference number and displays their difference. Its options include absolute or relative comparison, formatting, colors, symbols, position, prefix, and suffix.
Follow-up: How can the gauge be placed in a multi-indicator figure? Give each indicator a suitable domain, such as distinct x and y intervals or grid positions.
Related
plotly.graph_objects.Figureindicator.deltaindicator.gaugeindicator.numberindicator.domainindicator.title