docs: recharts chart techniques from AI builder field notes#6778
docs: recharts chart techniques from AI builder field notes#6778amsraman wants to merge 1 commit into
Conversation
Gradient fills (area/bar/pie), rounded bars, axis label styling, per-slice cell coloring, series shapes, tick/grid styling, and click-drilldown + hover-event recipes. All demos exec-verified. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Merging this PR will not alter performance
Comparing 
Footnotes
|
Greptile SummaryThis PR adds a third batch of Recharts documentation improvements, upstreaming chart techniques from field notes into the library docs. Each new section is a self-contained, exec-verified demo showing a specific technique (SVG gradient fills, rounded bars, per-slice coloring, axis/label/grid styling, hover and click drill-down events).
Confidence Score: 4/5All changes are additive docs examples with no effect on library code; the existing pages are untouched. Two small issues in piechart.md are worth fixing before merge but neither breaks existing docs. Most new sections are clean and follow existing patterns. The piechart additions have two fixable issues: the hover demo accesses PIE_HOVER_COLORS by raw index without a modulo guard, and both create_gradient and create_bar_gradient use id as a parameter name shadowing Python's built-in. Neither issue affects the other seven files. docs/library/graphing/charts/piechart.md — the hover demo color indexing and the gradient helper parameter name both need a small fix. Important Files Changed
Reviews (1): Last reviewed commit: "docs: recharts chart techniques from AI ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| rx.foreach( | ||
| PieHoverState.languages, | ||
| lambda item, index: rx.recharts.cell( | ||
| fill=rx.Var.create(PIE_HOVER_COLORS)[index], |
There was a problem hiding this comment.
PIE_HOVER_COLORS list is indexed without a modulo guard, so if languages ever has more items than there are colors (> 5), the JavaScript expression evaluates to undefined and the affected slices lose their fill entirely (SVG defaults to black). The pie_cells example in the same file uses index % len(colors) to avoid this — the hover example should match.
| fill=rx.Var.create(PIE_HOVER_COLORS)[index], | |
| fill=rx.Var.create(PIE_HOVER_COLORS)[index % len(PIE_HOVER_COLORS)], |
| def create_bar_gradient(color: str, id: str) -> rx.Component: | ||
| return rx.el.svg.linear_gradient( | ||
| rx.el.svg.stop(offset="5%", stop_color=color, stop_opacity=0.8), | ||
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.2), | ||
| id=id, | ||
| x1=0, | ||
| y1=0, | ||
| x2=0, | ||
| y2=1, | ||
| ) |
There was a problem hiding this comment.
id is a Python built-in function, so using it as a parameter name in create_bar_gradient shadows it in that scope. A small rename sidesteps the issue and is the idiomatic convention for SVG element id arguments.
| def create_bar_gradient(color: str, id: str) -> rx.Component: | |
| return rx.el.svg.linear_gradient( | |
| rx.el.svg.stop(offset="5%", stop_color=color, stop_opacity=0.8), | |
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.2), | |
| id=id, | |
| x1=0, | |
| y1=0, | |
| x2=0, | |
| y2=1, | |
| ) | |
| def create_bar_gradient(color: str, gradient_id: str) -> rx.Component: | |
| return rx.el.svg.linear_gradient( | |
| rx.el.svg.stop(offset="5%", stop_color=color, stop_opacity=0.8), | |
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.2), | |
| id=gradient_id, | |
| x1=0, | |
| y1=0, | |
| x2=0, | |
| y2=1, | |
| ) |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| def create_gradient(color: str, id: str) -> rx.Component: | ||
| return rx.el.svg.radial_gradient( | ||
| rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1), | ||
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6), | ||
| id=id, | ||
| cx="50%", | ||
| cy="50%", | ||
| r="50%", | ||
| fx="50%", | ||
| fy="50%", | ||
| ) |
There was a problem hiding this comment.
id shadows Python's built-in id() function both in the create_gradient signature and in the list comprehensions that unpack gradients. Renaming to gradient_id avoids the shadowing and keeps the code consistent with the suggested fix to create_bar_gradient.
| def create_gradient(color: str, id: str) -> rx.Component: | |
| return rx.el.svg.radial_gradient( | |
| rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1), | |
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6), | |
| id=id, | |
| cx="50%", | |
| cy="50%", | |
| r="50%", | |
| fx="50%", | |
| fy="50%", | |
| ) | |
| def create_gradient(color: str, gradient_id: str) -> rx.Component: | |
| return rx.el.svg.radial_gradient( | |
| rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1), | |
| rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6), | |
| id=gradient_id, | |
| cx="50%", | |
| cy="50%", | |
| r="50%", | |
| fx="50%", | |
| fy="50%", | |
| ) |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 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".
| outer_radius="80%", | ||
| padding_angle=2, | ||
| stroke="#fff", | ||
| stroke_width=2, |
There was a problem hiding this comment.
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 👍 / 👎.
1 participant
Third batch of upstreaming Reflex Build's AI-builder knowledge base into the docs (#6775, #6777). Recharts techniques the chart pages lacked:
rx.el.svg.defs+linear_gradient,fill="url(#id)"), rounded bars (radius)rx.recharts.label+custom_attrs, rotated y-label)rx.foreach+rx.recharts.cellwith an indexed palette, radial gradient fillsshapeon_click(baron_clickprovides no args) and hover events with cell-index bindingFlexgen 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