docs: recharts chart techniques from AI builder field notes

[amsraman]

Third batch of upstreaming Reflex Build's AI-builder knowledge base into the docs (#6775, #6777). Recharts techniques the chart pages lacked:

• areachart / barchart: SVG gradient fills (rx.el.svg.defs + linear_gradient, fill="url(#id)"), rounded bars (radius)
• linechart: styled axis labels (rx.recharts.label + custom_attrs, rotated y-label)
• piechart: per-slice coloring via rx.foreach + rx.recharts.cell with an indexed palette, radial gradient fills
• scatterchart: distinguishing series with shape
• general/axis, label, cartesiangrid: tick styling, label styling, grid styling
• barchart + piechart interactivity: click drill-down via per-cell on_click (bar on_click provides no args) and hover events with cell-index binding

Flexgen house style (custom HTML legends, tooltip prop constants) was deliberately stripped — only generic techniques upstreamed. Pages whose memories were already covered (radar, funnel, composed) were left untouched. All new demos exec-verified; pre-commit clean.

🤖 Generated with Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing docs/recharts-field-notes (a6b014b) with main (7e80931)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[greptile-apps]

Greptile Summary

This PR upstreams the third batch of Recharts charting techniques from Reflex Build's AI-builder knowledge base into the public docs, covering gradient fills, rounded bars, per-slice cell coloring, hover/click drill-down interactivity, axis/label/grid styling, and multi-shape scatter series. It also fixes the docgen pipeline's rpartition heuristic to split on "\ndef " instead of the bare string "def", eliminating spurious splits on occurrences of "def" inside string literals or identifiers.

• Chart docs (8 files): New sections added to areachart, barchart, linechart, piechart, scatterchart, axis, cartesiangrid, and label — all demos exec-verified, with gradient IDs consistent between defs and url() references, modulo guards on palette indices, and previously flagged id-shadowing issues resolved.
• docgen_pipeline.py: The rpartition fix correctly handles the no-match case with a ("", content) fallback and applies identically to both _render_demo and _render_demo_only paths.

Confidence Score: 5/5

Documentation-only additions with a targeted pipeline bug fix; no runtime logic or data paths are affected.

All changes are docs examples and a narrow parsing fix in the docgen pipeline. Previous review feedback on id-shadowing and the unguarded color-index in the pie hover example has been fully addressed. The gradient examples use consistent IDs between their defs blocks and url() references, and the interactive drilldown/hover patterns correctly bind event arguments at render time via rx.foreach. No functional regressions are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
docs/app/reflex_docs/docgen_pipeline.py	Tightens the data/code split from rpartition("def") to rpartition("\ndef "), preventing spurious matches on "def" inside string literals or identifiers like "defined". The fallback ("", content) correctly handles blocks where no top-level def is present.
docs/library/graphing/charts/areachart.md	Adds a Gradient Fill section demonstrating SVG linear gradients via rx.el.svg.defs. Implementation is correct; gradient IDs and url() references are consistent.
docs/library/graphing/charts/barchart.md	Adds Click Events/Drill-Down, Rounded Bars, and Gradient Fill sections. id-shadowing fix applied (uses gradient_id); color index has modulo guard; drilldown state and cell binding are logically correct.
docs/library/graphing/charts/linechart.md	Adds Axis Labels section showing rx.recharts.label nested inside axes with custom_attrs for rotation. Demo is well-formed and consistent with the rest of the page.
docs/library/graphing/charts/piechart.md	Adds Coloring Slices Individually, Gradient Fills, and Hover Events sections. Previously flagged issues (id shadowing in create_gradient, unguarded color index in PIE_HOVER_COLORS) are both resolved in this revision.
docs/library/graphing/charts/scatterchart.md	Adds Distinguishing Series with Shapes section. Multi-series scatter demo with three different shapes is well-formed; available shape values are correctly documented.
docs/library/graphing/general/axis.md	Adds Styling Axis Ticks section covering axis_line, tick_line, tick_size, interval, and custom_attrs. Demo is clear and correctly illustrates the minimal-axis style.
docs/library/graphing/general/cartesiangrid.md	Adds Styling the Grid section demonstrating class_name="opacity-25" and horizontal-only lines. Straightforward addition consistent with page style.
docs/library/graphing/general/label.md	Adds Styling Labels section showing custom_attrs for font size, weight, and rotation angle on axis labels. Demo correctly uses both x and y axis labels.

_{Reviews (4): Last reviewed commit: "docs: forward strokeWidth/cursor via cus..." | Re-trigger Greptile}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3e2de46c5e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use a supported prop for pie slice stroke width

In these pie demos, stroke_width is not a declared prop on rx.recharts.pie (checked the Pie wrapper in packages/reflex-components-recharts/src/reflex_components_recharts/polar.py), so Reflex treats it as a style key and renders it via wrapperStyle rather than forwarding strokeWidth to Recharts. Users copying this example therefore won't get the advertised slice separator width (the gradient demo below has the same issue); use custom_attrs={"strokeWidth": 2} or expose a real stroke_width prop.

Useful? React with 👍 / 👎.

[amsraman]

Thanks — all three addressed in 3f2b288. I verified each against Reflex 0.9.6 by rendering the component and inspecting the emitted props:

[P2] Pie separator width ignored. Confirmed: rx.recharts.pie(stroke_width=2) renders wrapperStyle:({ ["strokeWidth"] : 2 }), so the width never reaches the SVG. Switched both pie examples to custom_attrs={"strokeWidth": 2}, which emits a real strokeWidth:2 prop, and updated the surrounding prose.

[P3] Drill-down pointer cursor. Same wrapperStyle problem for cursor="pointer" on the cell. Routed through custom_attrs={"cursor": "pointer"} (emits cursor:"pointer").

[P3] Hover state does not clear. The center label rendered hovered_value unconditionally, so it showed 0 before any hover. Gated it behind rx.cond(PieHoverState.hovered_name != "", ...) with a "Hover a slice" hint otherwise.