{"spec_id":"step-basic","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nstep-basic: Basic Step Plot\nLibrary: plotly 6.9.0 | Python 3.13.14\nQuality: 89/100 | Created: 2026-07-25\n\"\"\"\n\nimport os\n\nimport numpy as np\nimport plotly.graph_objects as go\n\n\n# Theme tokens (Imprint palette — theme-adaptive chrome)\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\nGRID = \"rgba(26,26,23,0.15)\" if THEME == \"light\" else \"rgba(240,239,232,0.15)\"\nBRAND = \"#009E73\"  # Imprint palette position 1\n\n# Data - Monthly cumulative sales showing discrete jumps\nnp.random.seed(42)\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\nx = list(range(len(months)))\n\nmonthly_sales = np.random.randint(15000, 45000, size=12)\ncumulative_sales = np.cumsum(monthly_sales)\nyear_total = int(cumulative_sales[-1])\n\n# Plot\nfig = go.Figure()\n\nfig.add_trace(\n    go.Scatter(\n        x=x,\n        y=cumulative_sales,\n        mode=\"lines+markers\",\n        line={\"shape\": \"hv\", \"color\": BRAND, \"width\": 3},\n        marker={\"size\": 11, \"color\": BRAND, \"line\": {\"color\": PAGE_BG, \"width\": 2}},\n        fill=\"tozeroy\",\n        fillcolor=\"rgba(0,158,115,0.12)\",\n        name=\"Cumulative Sales\",\n        customdata=months,\n        hovertemplate=\"<b>%{customdata}</b><br>Cumulative: $%{y:,.0f}<extra></extra>\",\n    )\n)\n\n# Year-total reference line — focal point highlighting the running total\nfig.add_hline(y=year_total, line_dash=\"dot\", line_color=INK_SOFT, line_width=1.5, opacity=0.7)\nfig.add_annotation(\n    x=0,\n    xref=\"paper\",\n    y=year_total,\n    yref=\"y\",\n    xanchor=\"left\",\n    yanchor=\"bottom\",\n    yshift=12,\n    text=f\"Year total ${year_total:,.0f}\",\n    showarrow=False,\n    font={\"size\": 11, \"color\": INK_SOFT},\n)\n\n# Style\nfig.update_layout(\n    autosize=False,\n    width=800,\n    height=450,\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"color\": INK},\n    title={\n        \"text\": \"step-basic · python · plotly · anyplot.ai\",\n        \"font\": {\"size\": 16, \"color\": INK},\n        \"x\": 0.5,\n        \"xanchor\": \"center\",\n    },\n    xaxis={\n        \"title\": {\"text\": \"Month\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"tickmode\": \"array\",\n        \"tickvals\": x,\n        \"ticktext\": months,\n        \"showgrid\": False,\n        \"linecolor\": INK_SOFT,\n        \"zeroline\": False,\n    },\n    yaxis={\n        \"title\": {\"text\": \"Cumulative Sales ($)\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"showgrid\": True,\n        \"gridcolor\": GRID,\n        \"gridwidth\": 1,\n        \"linecolor\": INK_SOFT,\n        \"zeroline\": False,\n        \"rangemode\": \"tozero\",\n    },\n    showlegend=False,\n    margin={\"l\": 90, \"r\": 50, \"t\": 90, \"b\": 70},\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"}