{"spec_id":"gauge-basic","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\ngauge-basic: Basic Gauge Chart\nLibrary: plotly 6.8.0 | Python 3.13.14\nQuality: 94/100 | Updated: 2026-06-30\n\"\"\"\n\nimport os\n\nimport plotly.graph_objects as go\n\n\n# Theme tokens\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nELEVATED_BG = \"#FFFDF6\" if THEME == \"light\" else \"#242420\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\nINK_MUTED = \"#6B6A63\" if THEME == \"light\" else \"#A8A79F\"\n\n# Imprint palette zone colors: red=bad, amber=caution, green=good\nZONE_LOW = \"#AE3030\"  # Imprint matte red — At Risk\nZONE_MID = \"#DDCC77\"  # Imprint amber — On Track\nZONE_HIGH = \"#009E73\"  # Imprint brand green — Exceeds Target\n\n# Data — Sales target achievement for the quarter\nvalue = 72\nmin_value = 0\nmax_value = 100\nthresholds = [30, 70]\n\ngoal = thresholds[1]\n\n# Plot\nfig = go.Figure(\n    go.Indicator(\n        mode=\"gauge+number+delta\",\n        value=value,\n        number={\"font\": {\"size\": 48, \"color\": INK, \"family\": \"Arial\"}, \"suffix\": \"%\"},\n        delta={\n            \"reference\": goal,\n            \"relative\": False,\n            \"valueformat\": \"+.0f\",\n            \"suffix\": \"pp vs. goal\",\n            \"font\": {\"size\": 13, \"color\": INK, \"family\": \"Arial\"},\n            \"increasing\": {\"color\": ZONE_HIGH},\n            \"decreasing\": {\"color\": ZONE_LOW},\n        },\n        title={\n            \"text\": (\n                \"<b>Sales Target Achievement</b>\"\n                f\"<br><span style='font-size:11px;color:{INK_SOFT}'>\"\n                \"gauge-basic · python · plotly · anyplot.ai</span>\"\n            ),\n            \"font\": {\"size\": 16, \"color\": INK, \"family\": \"Arial\"},\n        },\n        gauge={\n            \"shape\": \"angular\",\n            \"axis\": {\n                \"range\": [min_value, max_value],\n                \"tickwidth\": 1,\n                \"tickcolor\": INK_SOFT,\n                \"tickfont\": {\"size\": 10, \"color\": INK_SOFT, \"family\": \"Arial\"},\n                \"ticksuffix\": \"%\",\n                \"dtick\": 10,\n            },\n            # Slim needle keeps zone colors fully visible\n            \"bar\": {\"color\": INK, \"thickness\": 0.06, \"line\": {\"color\": INK, \"width\": 0}},\n            \"bgcolor\": ELEVATED_BG,\n            \"borderwidth\": 1,\n            \"bordercolor\": INK_SOFT,\n            \"steps\": [\n                {\"range\": [min_value, thresholds[0]], \"color\": ZONE_LOW},\n                {\"range\": [thresholds[0], thresholds[1]], \"color\": ZONE_MID},\n                {\"range\": [thresholds[1], max_value], \"color\": ZONE_HIGH},\n            ],\n            \"threshold\": {\"line\": {\"color\": INK, \"width\": 3}, \"thickness\": 0.95, \"value\": value},\n        },\n        domain={\"x\": [0.05, 0.95], \"y\": [0.30, 0.95]},\n    )\n)\n\n# Layout — page surface + zone legend + callout\nfig.update_layout(\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"family\": \"Arial\", \"color\": INK},\n    autosize=False,\n    margin={\"l\": 40, \"r\": 40, \"t\": 70, \"b\": 60},\n    annotations=[\n        # Zone legend row — three color-coded chips below the gauge\n        {\n            \"x\": 0.20,\n            \"y\": 0.14,\n            \"xref\": \"paper\",\n            \"yref\": \"paper\",\n            \"text\": (\n                f\"<span style='color:{ZONE_LOW};font-size:13px'>●</span>  \"\n                f\"<b>At Risk</b>  \"\n                f\"<span style='color:{INK_MUTED}'>0–30%</span>\"\n            ),\n            \"showarrow\": False,\n            \"font\": {\"size\": 12, \"color\": INK, \"family\": \"Arial\"},\n        },\n        {\n            \"x\": 0.50,\n            \"y\": 0.14,\n            \"xref\": \"paper\",\n            \"yref\": \"paper\",\n            \"text\": (\n                f\"<span style='color:{ZONE_MID};font-size:13px'>●</span>  \"\n                f\"<b>On Track</b>  \"\n                f\"<span style='color:{INK_MUTED}'>30–70%</span>\"\n            ),\n            \"showarrow\": False,\n            \"font\": {\"size\": 12, \"color\": INK, \"family\": \"Arial\"},\n        },\n        {\n            \"x\": 0.80,\n            \"y\": 0.14,\n            \"xref\": \"paper\",\n            \"yref\": \"paper\",\n            \"text\": (\n                f\"<span style='color:{ZONE_HIGH};font-size:13px'>●</span>  \"\n                f\"<b>Exceeds Target</b>  \"\n                f\"<span style='color:{INK_MUTED}'>70–100%</span>\"\n            ),\n            \"showarrow\": False,\n            \"font\": {\"size\": 12, \"color\": INK, \"family\": \"Arial\"},\n        },\n        # Target-exceeded callout — immediate data story\n        {\n            \"x\": 0.5,\n            \"y\": 0.03,\n            \"xref\": \"paper\",\n            \"yref\": \"paper\",\n            \"text\": \"<b>✓ Target Exceeded</b>  ·  72% surpasses the 70% goal\",\n            \"showarrow\": False,\n            \"font\": {\"size\": 12, \"color\": ZONE_HIGH, \"family\": \"Arial\"},\n            \"bgcolor\": ELEVATED_BG,\n            \"bordercolor\": ZONE_HIGH,\n            \"borderwidth\": 1,\n            \"borderpad\": 6,\n        },\n    ],\n)\n\n# Save\nfig.write_image(f\"plot-{THEME}.png\", width=800, height=450, scale=4)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}