diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 3159c7c103c..fa0fb087da5 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -140,6 +140,12 @@ def get_previews_from_frontmatter(filepath: str) -> dict[str, str]:
 recipes_list = defaultdict(list)
 docs_ns = SimpleNamespace()
 
+# Maps a library doc's filename-based key (the first element of its component
+# list, e.g. "areachart") to a human-friendly display title from frontmatter
+# (e.g. "Area Chart"). The sidebar uses this for labels while still deriving the
+# URL from the filename key, so titles read correctly without breaking links.
+library_display_titles: dict[str, str] = {}
+
 doc_markdown_sources: dict[str, str] = {}
 
 
@@ -366,9 +372,10 @@ def handle_library_doc(
     else:
         component_list[resolved.category].append(clist)
     # Library docs render via multi_docs (not make_docpage), so without this
-    # they'd inherit the generic site-wide meta description. Derive a
-    # page-specific meta description from the doc's frontmatter/body prose, and
-    # prefer an explicit frontmatter `title:` for the page title.
+    # they'd inherit the generic site-wide meta description and a title-cased
+    # filename (e.g. "Barchart"). Derive a page-specific meta description from
+    # the doc's frontmatter/body prose, and prefer an explicit frontmatter
+    # `title:` for a human-friendly, keyword-rich page title.
     try:
         source: str | None = Path(actual_path).read_text(encoding="utf-8")
         document = parse_document(source)
@@ -382,6 +389,10 @@ def handle_library_doc(
         if frontmatter is not None and frontmatter.title
         else resolved.display_title
     )
+    if frontmatter is not None and frontmatter.title:
+        # clist[0] is the filename-based key the sidebar links from; record the
+        # frontmatter title so the sidebar can show it as the label instead.
+        library_display_titles[clist[0]] = display_title
     return multi_docs(
         path=resolved.route,
         virtual_path=doc,
diff --git a/docs/app/reflex_docs/pages/library_previews.py b/docs/app/reflex_docs/pages/library_previews.py
index c577c879074..493f2e8863a 100644
--- a/docs/app/reflex_docs/pages/library_previews.py
+++ b/docs/app/reflex_docs/pages/library_previews.py
@@ -225,17 +225,17 @@ def page() -> rx.Component:
 graphing_components_dict = {
     "charts": {
         "path": "charts",
-        "description": "Components for creating various types of charts and graphs. These are useful for data visualization and presenting complex information in an easily understandable format.",
+        "description": "Create interactive charts and graphs in Python with Reflex. Build bar, line, area, pie, scatter, radar, and more chart types on top of Recharts for data visualization — all in pure Python, no JavaScript.",
         "component_category": "Charts",
     },
     "general": {
         "path": "general",
-        "description": "General-purpose graphing components that provide foundational elements for creating custom visualizations. These components offer flexibility and can be combined to create more complex graphical representations.",
+        "description": "General-purpose graphing components — axes, legends, tooltips, grids, and more — for customizing your Python charts and data visualizations in Reflex. Combine them to build clear, interactive charts in pure Python.",
         "component_category": "General",
     },
     "other-charts": {
         "path": "other-charts",
-        "description": "Other graphing components that provide additional functionality and customization options for creating custom visualizations. These components can be used to enhance the graphical representation of data and improve user experience.",
+        "description": "Additional Python charting options in Reflex, including Plotly and Matplotlib (pyplot). Render interactive Plotly Express figures and any Matplotlib plot in your web app — all in pure Python.",
         "component_category": "Other-Charts",
     },
 }
diff --git a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/component_lib.py b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/component_lib.py
index 10260aaa5f0..ba4090e25a6 100644
--- a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/component_lib.py
+++ b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/component_lib.py
@@ -59,9 +59,13 @@ def get_category_children(category, category_list, prefix=""):
             link=f"/library/{prefix or ''}{category.lower().replace(' ', '-')}/",
         )
     )
+    from reflex_docs.pages.docs import library_display_titles
+
     for c in category_list:
+        # Prefer a frontmatter-provided display title (e.g. "Area Chart"); fall
+        # back to deriving one from the filename key (e.g. "Areachart").
         item = SideBarItem(
-            names=get_display_name(c[0]),
+            names=library_display_titles.get(c[0], get_display_name(c[0])),
             link=get_component_link(category, c, prefix=prefix),
         )
         category_item_children.append(item)
diff --git a/docs/app/tests/test_doc_description.py b/docs/app/tests/test_doc_description.py
index 10204d639a4..1cd3a101263 100644
--- a/docs/app/tests/test_doc_description.py
+++ b/docs/app/tests/test_doc_description.py
@@ -63,3 +63,23 @@ def test_metadata_dict_short_description_falls_through_to_body():
     result = extract_doc_description(LONG_PROSE, {"description": "Docs"})
     assert result is not None
     assert result.startswith("5 minutes of configuration")
+
+
+def test_chart_frontmatter_meta_description_from_frontmatter():
+    """A chart-style frontmatter meta_description is extracted from raw markdown.
+
+    Mirrors the graphing docs: a ``components:`` list followed by a long
+    ``meta_description``. The list lines must be skipped and the description
+    returned verbatim (not stitched together with body prose).
+    """
+    long_desc = (
+        "Create interactive bar charts in Python with Reflex. Build single, "
+        "stacked, and multi-series Recharts bar charts with custom colors."
+    )
+    source = (
+        "---\ncomponents:\n  - rx.recharts.BarChart\n  - rx.recharts.Bar\n"
+        "title: Bar Chart\n"
+        f"meta_description: {long_desc}\n---\n"
+        "# Bar Chart\n\nBar charts in Reflex are built on Recharts.\n"
+    )
+    assert extract_doc_description(source) == long_desc
diff --git a/docs/library/graphing/charts/areachart.md b/docs/library/graphing/charts/areachart.md
index 4fbab9f21fa..06573b36c44 100644
--- a/docs/library/graphing/charts/areachart.md
+++ b/docs/library/graphing/charts/areachart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.AreaChart
   - rx.recharts.Area
+title: Area Chart
+meta_description: "Create area charts in Python with Reflex. Build stacked, gradient, and multi-series Recharts area charts with custom axes, tooltips, legends, and colors — all in pure Python."
 ---
 
 # Area Chart
@@ -11,7 +13,7 @@ import reflex as rx
 import random
 ```
 
-A Recharts area chart displays quantitative data using filled areas between a line connecting data points and the axis.
+Area charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A Recharts area chart displays quantitative data using filled areas between a line connecting data points and the axis.
 
 ## Basic Example
 
@@ -93,9 +95,9 @@ def area_sync():
     )
 ```
 
-## Stacking Charts
+## Stacked Area Chart
 
-The `stack_id` prop allows you to stack multiple graphs on top of each other. In the example, it is set to "1" for both charts, indicating that they should be stacked together. This means that the bars or areas of the charts will be vertically stacked, with the values of each chart contributing to the total height of the stacked areas or bars.
+The `stack_id` prop allows you to stack multiple areas on top of each other, creating a stacked area chart. In the example, it is set to "1" for both charts, indicating that they should be stacked together. This means that the areas of the charts will be vertically stacked, with the values of each chart contributing to the total height of the stacked areas.
 
 This is similar to the `sync_id` prop, but instead of synchronizing the interaction between the charts, it just stacks the charts on top of each other.
 
@@ -272,3 +274,11 @@ def area_stateful():
         width="100%",
     )
 ```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Line Chart](/docs/library/graphing/charts/linechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Composed Chart](/docs/library/graphing/charts/composedchart)
diff --git a/docs/library/graphing/charts/barchart.md b/docs/library/graphing/charts/barchart.md
index 336de918164..86fa2fe422f 100644
--- a/docs/library/graphing/charts/barchart.md
+++ b/docs/library/graphing/charts/barchart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.BarChart
   - rx.recharts.Bar
+title: Bar Chart
+meta_description: "Create interactive bar charts in Python with Reflex. Build grouped, stacked, and horizontal Recharts bar charts with custom colors, axes, tooltips, and legends — all in pure Python, no JavaScript."
 ---
 
 # Bar Chart
@@ -11,7 +13,7 @@ import reflex as rx
 import random
 ```
 
-A bar chart presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
+Bar charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and let you visualize categorical data in pure Python. A bar chart presents categorical data with rectangular bars whose heights or lengths are proportional to the values that they represent.
 
 For a bar chart we must define an `rx.recharts.bar()` component for each set of values we wish to plot. Each `rx.recharts.bar()` component has a `data_key` which clearly states which variable in our data we are tracking. In this simple example we plot `uv` as a bar against the `name` column which we set as the `data_key` in `rx.recharts.x_axis`.
 
@@ -46,7 +48,7 @@ def bar_simple():
 
 ## Multiple Bars
 
-Multiple bars can be placed on the same `bar_chart`, using multiple `rx.recharts.bar()` components.
+Multiple bars can be placed on the same `bar_chart`, using multiple `rx.recharts.bar()` components. Drawn side by side like this, they form a grouped (or clustered) bar chart.
 
 ```python demo graphing
 data = [
@@ -80,6 +82,43 @@ def bar_double():
     )
 ```
 
+## Stacked Bar Chart
+
+To build a stacked bar chart, give each `rx.recharts.bar()` the same `stack_id`. Instead of being drawn side by side, the bars are stacked on top of one another, which is ideal for showing part-to-whole composition (also called a segmented bar chart). Set `stack_offset="expand"` on the `bar_chart` to turn it into a 100% stacked bar chart.
+
+```python demo graphing
+data = [
+    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
+    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
+    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
+    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
+    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
+    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
+    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
+]
+
+
+def bar_stacked():
+    return rx.recharts.bar_chart(
+        rx.recharts.bar(
+            data_key="uv",
+            stack_id="1",
+            fill=rx.color("accent", 8),
+        ),
+        rx.recharts.bar(
+            data_key="pv",
+            stack_id="1",
+            fill=rx.color("green", 8),
+        ),
+        rx.recharts.x_axis(data_key="name"),
+        rx.recharts.y_axis(),
+        rx.recharts.legend(),
+        data=data,
+        width="100%",
+        height=300,
+    )
+```
+
 ## Ranged Charts
 
 You can also assign a range in the bar by assigning the data_key in the `rx.recharts.bar` to a list with two elements, i.e. here a range of two temperatures for each date.
@@ -189,7 +228,7 @@ def bar_features():
 
 ## Vertical Example
 
-The `layout` prop allows you to set the orientation of the graph to be vertical or horizontal, it is set horizontally by default.
+The `layout` prop allows you to set the orientation of the graph to be vertical or horizontal, it is set horizontally by default. Setting `layout="vertical"` makes the bars run left-to-right, which is how you create a horizontal bar chart in Reflex.
 
 ```md alert info
 # Include margins around your graph to ensure proper spacing and enhance readability. By default, provide margins on all sides of the chart to create a visually appealing and functional representation of your data.
@@ -225,3 +264,11 @@ def bar_vertical():
 ```
 
 To learn how to use the `sync_id`, `stack_id`,`x_axis_id` and `y_axis_id` props check out the of the area chart [documentation](/docs/library/graphing/charts/areachart), where these props are all described with examples.
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Line Chart](/docs/library/graphing/charts/linechart)
+- [Area Chart](/docs/library/graphing/charts/areachart)
+- [Composed Chart](/docs/library/graphing/charts/composedchart)
diff --git a/docs/library/graphing/charts/composedchart.md b/docs/library/graphing/charts/composedchart.md
index bfa4a44a441..8dc6f92d46b 100644
--- a/docs/library/graphing/charts/composedchart.md
+++ b/docs/library/graphing/charts/composedchart.md
@@ -1,6 +1,8 @@
 ---
 components:
   - rx.recharts.ComposedChart
+title: Composed Chart
+meta_description: "Build composed charts in Python with Reflex. Combine bars, lines, and areas in a single Recharts composed chart with shared axes, tooltips, and legends — all in pure Python."
 ---
 
 ```python exec
@@ -9,7 +11,7 @@ import reflex as rx
 
 # Composed Chart
 
-A `composed_chart` is a higher-level component chart that is composed of multiple charts, where other charts are the children of the `composed_chart`. The charts are placed on top of each other in the order they are provided in the `composed_chart` function.
+Composed charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A `composed_chart` (also called a combo chart) is a higher-level component chart that is composed of multiple charts, where other charts are the children of the `composed_chart`. The charts are placed on top of each other in the order they are provided in the `composed_chart` function.
 
 ```md alert info
 # To learn more about individual charts, checkout: **[area_chart](/docs/library/graphing/charts/areachart)**, **[line_chart](/docs/library/graphing/charts/linechart)**, or **[bar_chart](/docs/library/graphing/charts/barchart)**.
@@ -41,3 +43,57 @@ def composed():
         width="100%",
     )
 ```
+
+## When to Use a Composed Chart
+
+A composed chart is useful whenever a single chart type can't tell the whole story. Common combinations include overlaying a trend `line` on top of `bar` totals, drawing an `area` for a range with a `line` for the actual value, or comparing a cumulative measure against a per-period one. Because each series — `rx.recharts.bar()`, `rx.recharts.line()`, and `rx.recharts.area()` — is a child of `rx.recharts.composed_chart()`, they all share the same `data`, x-axis, tooltip, and legend. Series are drawn in the order you list them, so later children render on top of earlier ones.
+
+## Composed Chart with a Dual Axis
+
+When two series use very different scales (for example, a count and a dollar amount), a single y-axis makes the smaller series unreadable. Add a second y-axis and point each series at one with the `y_axis_id` prop: here the `orders` bars use the left axis and the `revenue` line uses the right axis.
+
+```python demo graphing
+data = [
+    {"name": "Mon", "orders": 40, "revenue": 2400},
+    {"name": "Tue", "orders": 30, "revenue": 1398},
+    {"name": "Wed", "orders": 55, "revenue": 9800},
+    {"name": "Thu", "orders": 27, "revenue": 3908},
+    {"name": "Fri", "orders": 62, "revenue": 4800},
+    {"name": "Sat", "orders": 48, "revenue": 3800},
+    {"name": "Sun", "orders": 35, "revenue": 4300},
+]
+
+
+def composed_dual_axis():
+    return rx.recharts.composed_chart(
+        rx.recharts.bar(
+            data_key="orders",
+            bar_size=20,
+            fill=rx.color("accent", 8),
+            y_axis_id="left",
+        ),
+        rx.recharts.line(
+            data_key="revenue",
+            type_="monotone",
+            stroke=rx.color("green", 9),
+            y_axis_id="right",
+        ),
+        rx.recharts.x_axis(data_key="name"),
+        rx.recharts.y_axis(y_axis_id="left"),
+        rx.recharts.y_axis(y_axis_id="right", orientation="right"),
+        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
+        rx.recharts.graphing_tooltip(),
+        rx.recharts.legend(),
+        data=data,
+        height=300,
+        width="100%",
+    )
+```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Line Chart](/docs/library/graphing/charts/linechart)
+- [Area Chart](/docs/library/graphing/charts/areachart)
diff --git a/docs/library/graphing/charts/errorbar.md b/docs/library/graphing/charts/errorbar.md
index c848ebeef00..d4097aa6663 100644
--- a/docs/library/graphing/charts/errorbar.md
+++ b/docs/library/graphing/charts/errorbar.md
@@ -1,6 +1,8 @@
 ---
 components:
   - rx.recharts.ErrorBar
+title: Error Bar
+meta_description: "Add error bars to your charts in Python with Reflex. Use Recharts error bars to visualize uncertainty and variance on scatter and line charts — all in pure Python, no JavaScript."
 ---
 
 ```python exec
@@ -9,7 +11,7 @@ import reflex as rx
 
 # Error Bar
 
-An error bar is a graphical representation of the uncertainty or variability of a data point in a chart, depicted as a line extending from the data point parallel to one of the axes. The `data_key`, `width`, `stroke_width`, `stroke`, and `direction` props can be used to customize the appearance and behavior of the error bars, specifying the data source, dimensions, color, and orientation of the error bars.
+Error bars in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. An error bar is a graphical representation of the uncertainty or variability of a data point in a chart, depicted as a line extending from the data point parallel to one of the axes. The `data_key`, `width`, `stroke_width`, `stroke`, and `direction` props can be used to customize the appearance and behavior of the error bars, specifying the data source, dimensions, color, and orientation of the error bars.
 
 ```python demo graphing
 data = [
@@ -42,3 +44,51 @@ def error():
         height=300,
     )
 ```
+
+## Symmetric and Asymmetric Errors
+
+The `data_key` of an `rx.recharts.error_bar()` points at a field in each data row, and that field controls how far the whisker extends. Use a single number for a **symmetric** error — the same distance above and below the point — or a two-element `[low, high]` list for an **asymmetric** error. In the example above, some rows use `"errorY": 20` (symmetric) while others use `"errorY": [30, 20]` (asymmetric). The `direction` prop (`"x"` or `"y"`) chooses which axis the whisker runs along, so you can show error on one or both axes at once.
+
+## Error Bars on a Line Chart
+
+Error bars aren't limited to scatter charts. Add an `rx.recharts.error_bar()` as a child of an `rx.recharts.line()` to visualize variance or measurement uncertainty on a line chart — useful for time series such as average temperature or benchmark results.
+
+```python demo graphing
+data = [
+    {"month": "Jan", "temp": 7, "error": [2, 3]},
+    {"month": "Feb", "temp": 9, "error": 2},
+    {"month": "Mar", "temp": 12, "error": [3, 2]},
+    {"month": "Apr", "temp": 16, "error": 3},
+    {"month": "May", "temp": 20, "error": [2, 4]},
+    {"month": "Jun", "temp": 24, "error": 3},
+]
+
+
+def line_error():
+    return rx.recharts.line_chart(
+        rx.recharts.line(
+            rx.recharts.error_bar(
+                data_key="error",
+                direction="y",
+                width=4,
+                stroke_width=2,
+                stroke=rx.color("accent", 9),
+            ),
+            data_key="temp",
+            stroke=rx.color("accent", 9),
+        ),
+        rx.recharts.x_axis(data_key="month"),
+        rx.recharts.y_axis(),
+        data=data,
+        width="100%",
+        height=300,
+    )
+```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Scatter Chart](/docs/library/graphing/charts/scatterchart)
+- [Line Chart](/docs/library/graphing/charts/linechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
diff --git a/docs/library/graphing/charts/funnelchart.md b/docs/library/graphing/charts/funnelchart.md
index b80e50cde4c..67bbba48250 100644
--- a/docs/library/graphing/charts/funnelchart.md
+++ b/docs/library/graphing/charts/funnelchart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.FunnelChart
   - rx.recharts.Funnel
+title: Funnel Chart
+meta_description: "Create funnel charts in Python with Reflex. Build interactive Recharts funnel charts to visualize conversion stages and user flow with custom colors, labels, and tooltips."
 ---
 
 ```python exec
@@ -13,7 +15,7 @@ rx.toast.provider()
 
 # Funnel Chart
 
-A funnel chart is a graphical representation used to visualize how data moves through a process. In a funnel chart, the dependent variable’s value diminishes in the subsequent stages of the process. It can be used to demonstrate the flow of users through a business or sales process.
+Funnel charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A funnel chart is a graphical representation used to visualize how data moves through a process. In a funnel chart, the dependent variable’s value diminishes in the subsequent stages of the process. It can be used to demonstrate the flow of users through a business or sales process.
 
 ## Simple Example
 
@@ -150,3 +152,11 @@ def funnel_animation():
         height=300,
     )
 ```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Pie Chart](/docs/library/graphing/charts/piechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Composed Chart](/docs/library/graphing/charts/composedchart)
diff --git a/docs/library/graphing/charts/linechart.md b/docs/library/graphing/charts/linechart.md
index a9b9cef0e41..e0b8143de68 100644
--- a/docs/library/graphing/charts/linechart.md
+++ b/docs/library/graphing/charts/linechart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.LineChart
   - rx.recharts.Line
+title: Line Chart
+meta_description: "Build interactive line charts in pure Python with Reflex. Plot single or multi-line Recharts time series with custom axes, tooltips, legends, and styling — no JavaScript needed."
 ---
 
 # Line Chart
@@ -12,11 +14,11 @@ from typing import Any
 import reflex as rx
 ```
 
-A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line.
+Line charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and are created in pure Python. A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line.
 
 ## Simple Example
 
-For a line chart we must define an `rx.recharts.line()` component for each set of values we wish to plot. Each `rx.recharts.line()` component has a `data_key` which clearly states which variable in our data we are tracking. In this simple example we plot `pv` and `uv` as separate lines against the `name` column which we set as the `data_key` in `rx.recharts.x_axis`.
+For a line chart we must define an `rx.recharts.line()` component for each set of values we wish to plot. Each `rx.recharts.line()` component has a `data_key` which clearly states which variable in our data we are tracking. In this simple example we plot `pv` and `uv` as separate lines against the `name` column which we set as the `data_key` in `rx.recharts.x_axis`. Plotting more than one line like this creates a multi-line chart.
 
 ```python demo graphing
 data = [
@@ -195,3 +197,11 @@ def line_dynamic():
 ```
 
 To learn how to use the `sync_id`, `x_axis_id` and `y_axis_id` props check out the of the area chart [documentation](/docs/library/graphing/charts/areachart), where these props are all described with examples.
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Area Chart](/docs/library/graphing/charts/areachart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Scatter Chart](/docs/library/graphing/charts/scatterchart)
diff --git a/docs/library/graphing/charts/piechart.md b/docs/library/graphing/charts/piechart.md
index 1767764f9cf..24d17a12c3c 100644
--- a/docs/library/graphing/charts/piechart.md
+++ b/docs/library/graphing/charts/piechart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.PieChart
   - rx.recharts.Pie
+title: Pie Chart
+meta_description: "Build interactive pie and donut charts in Python with Reflex. Create Recharts pie charts with custom colors, labels, legends, and tooltips — all in pure Python, no JavaScript required."
 ---
 
 # Pie Chart
@@ -10,7 +12,7 @@ components:
 import reflex as rx
 ```
 
-A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.
+Pie charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A pie chart — or a donut chart when the center is hollow — is a circular statistical graphic which is divided into slices to illustrate numerical proportion.
 
 For a pie chart we must define an `rx.recharts.pie()` component for each set of values we wish to plot. Each `rx.recharts.pie()` component has a `data`, a `data_key` and a `name_key` which clearly states which data and which variables in our data we are tracking. In this simple example we plot `value` column as our `data_key` against the `name` column which we set as our `name_key`.
 We also use the `fill` prop to set the color of the pie slices.
@@ -154,3 +156,11 @@ def dynamic_pie_example():
         height="15em",
     )
 ```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Radial Bar Chart](/docs/library/graphing/charts/radialbarchart)
+- [Funnel Chart](/docs/library/graphing/charts/funnelchart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
diff --git a/docs/library/graphing/charts/radarchart.md b/docs/library/graphing/charts/radarchart.md
index 6b64c384515..09c7fd978c7 100644
--- a/docs/library/graphing/charts/radarchart.md
+++ b/docs/library/graphing/charts/radarchart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.RadarChart
   - rx.recharts.Radar
+title: Radar Chart
+meta_description: "Build radar (spider) charts in Python with Reflex. Create interactive Recharts radar charts with multiple series, custom polar axes, legends, and tooltips — all in pure Python."
 ---
 
 # Radar Chart
@@ -11,7 +13,7 @@ import reflex as rx
 from typing import Any
 ```
 
-A radar chart shows multivariate data of three or more quantitative variables mapped onto an axis.
+Radar charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A radar chart (also called a spider chart) shows multivariate data of three or more quantitative variables mapped onto an axis.
 
 ## Simple Example
 
@@ -194,3 +196,11 @@ def radar_dynamic():
         height="15em",
     )
 ```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Radial Bar Chart](/docs/library/graphing/charts/radialbarchart)
+- [Pie Chart](/docs/library/graphing/charts/piechart)
+- [Line Chart](/docs/library/graphing/charts/linechart)
diff --git a/docs/library/graphing/charts/radialbarchart.md b/docs/library/graphing/charts/radialbarchart.md
index 993c9ab8d31..5d6320bc4f7 100644
--- a/docs/library/graphing/charts/radialbarchart.md
+++ b/docs/library/graphing/charts/radialbarchart.md
@@ -1,6 +1,8 @@
 ---
 components:
   - rx.recharts.RadialBarChart
+title: Radial Bar Chart
+meta_description: "Create radial bar and gauge charts in Python with Reflex. Build circular Recharts radial bar charts with custom colors, start and end angles, and legends — all in pure Python."
 ---
 
 # Radial Bar Chart
@@ -9,9 +11,11 @@ components:
 import reflex as rx
 ```
 
+Radial bar charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A radial bar chart is a circular visualization where data categories are represented by bars extending outward from a central point, with the length of each bar proportional to its value.
+
 ## Simple Example
 
-This example demonstrates how to use a `radial_bar_chart` with a `radial_bar`. The `radial_bar_chart` takes in `data` and then the `radial_bar` takes in a `data_key`. A radial bar chart is a circular visualization where data categories are represented by bars extending outward from a central point, with the length of each bar proportional to its value.
+This example demonstrates how to use a `radial_bar_chart` with a `radial_bar`. The `radial_bar_chart` takes in `data` and then the `radial_bar` takes in a `data_key` naming the value each bar represents. The `min_angle` prop sets a minimum sweep for every bar so that even small values stay visible around the circle.
 
 ```md alert info
 # Fill color supports `rx.color()`, which automatically adapts to dark/light mode changes.
@@ -43,7 +47,7 @@ def radial_bar_simple():
 
 ## Advanced Example
 
-The `start_angle` and `end_angle` define the circular arc over which the bars are distributed, while `inner_radius` and `outer_radius` determine the radial extent of the bars from the center.
+The `start_angle` and `end_angle` define the circular arc over which the bars are distributed, while `inner_radius` and `outer_radius` determine the radial extent of the bars from the center. Sweeping a half circle (`start_angle=180`, `end_angle=0`) is a common way to build a gauge chart.
 
 ```python demo graphing
 data_radial_bar = [
@@ -74,3 +78,15 @@ def radial_bar_advanced():
         height=300,
     )
 ```
+
+## When to Use a Radial Bar Chart
+
+A radial bar chart is a compact, eye-catching alternative to a standard bar chart, best suited to comparing a small number of categories or showing progress toward a goal. Because the bars wrap around a circle, it works well for dashboards where space is limited. The key props for shaping the chart are `inner_radius` and `outer_radius` (how far the bars sit from the center), `start_angle` and `end_angle` (the arc the bars span — use `180` to `0` for a half-circle gauge), `min_angle` (the minimum bar length), and `background` (a track drawn behind each bar). For many categories or precise value comparisons, a standard [Bar Chart](/docs/library/graphing/charts/barchart) is usually easier to read.
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Radar Chart](/docs/library/graphing/charts/radarchart)
+- [Pie Chart](/docs/library/graphing/charts/piechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
diff --git a/docs/library/graphing/charts/scatterchart.md b/docs/library/graphing/charts/scatterchart.md
index c4dc2f21c2f..3741a032f8c 100644
--- a/docs/library/graphing/charts/scatterchart.md
+++ b/docs/library/graphing/charts/scatterchart.md
@@ -2,6 +2,8 @@
 components:
   - rx.recharts.ScatterChart
   - rx.recharts.Scatter
+title: Scatter Chart
+meta_description: "Create scatter plots and bubble charts in Python with Reflex. Build interactive Recharts scatter charts with multiple series, custom axes, sizing, and tooltips — all in pure Python."
 ---
 
 # Scatter Chart
@@ -10,7 +12,7 @@ components:
 import reflex as rx
 ```
 
-A scatter chart always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis. The chart displays points at the intersection of an x and y numerical value, combining these values into single data points.
+Scatter charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A scatter plot (or scatter chart) always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis. The chart displays points at the intersection of an x and y numerical value, combining these values into single data points.
 
 ## Simple Example
 
@@ -207,3 +209,41 @@ def scatter_shape():
         width="100%",
     )
 ```
+
+## Bubble Chart
+
+Adding an `rx.recharts.z_axis()` turns a scatter chart into a bubble chart: the `z` value of each point controls the bubble size, mapped to a pixel `range`. This lets you encode a third dimension of data alongside the x and y position.
+
+```python demo graphing
+data = [
+    {"x": 100, "y": 200, "z": 200},
+    {"x": 120, "y": 100, "z": 260},
+    {"x": 170, "y": 300, "z": 400},
+    {"x": 140, "y": 250, "z": 280},
+    {"x": 150, "y": 400, "z": 500},
+    {"x": 110, "y": 280, "z": 200},
+]
+
+
+def bubble_chart():
+    return rx.recharts.scatter_chart(
+        rx.recharts.scatter(
+            data=data,
+            fill=rx.color("accent", 8),
+        ),
+        rx.recharts.x_axis(data_key="x", name="x", type_="number"),
+        rx.recharts.y_axis(data_key="y", name="y", type_="number"),
+        rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
+        rx.recharts.graphing_tooltip(),
+        width="100%",
+        height=300,
+    )
+```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Line Chart](/docs/library/graphing/charts/linechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Error Bar](/docs/library/graphing/charts/errorbar)
diff --git a/docs/library/graphing/charts/treemap.md b/docs/library/graphing/charts/treemap.md
new file mode 100644
index 00000000000..7346ef8b9c3
--- /dev/null
+++ b/docs/library/graphing/charts/treemap.md
@@ -0,0 +1,72 @@
+---
+components:
+  - rx.recharts.Treemap
+title: Treemap
+meta_description: "Create treemap charts in Python with Reflex. Build interactive Recharts treemaps to visualize hierarchical, part-to-whole data as nested rectangles — all in pure Python, no JavaScript."
+---
+
+# Treemap
+
+```python exec
+import reflex as rx
+```
+
+Treemap charts in Reflex are built on [Recharts](https://recharts.org/), a React charting library, and created in pure Python. A treemap displays hierarchical, part-to-whole data as a set of nested rectangles, where the area of each rectangle is proportional to its value. Treemaps are a space-efficient way to compare many categories at once.
+
+## Simple Example
+
+An `rx.recharts.treemap()` takes a list of dictionaries as its `data` and a `data_key` naming the field that determines each rectangle's size. Use `name_key` to set the label shown on each tile.
+
+```python demo graphing
+data = [
+    {"name": "Category A", "size": 2400, "fill": rx.color("accent", 8)},
+    {"name": "Category B", "size": 4567, "fill": rx.color("blue", 8)},
+    {"name": "Category C", "size": 1398, "fill": rx.color("green", 8)},
+    {"name": "Category D", "size": 9800, "fill": rx.color("orange", 8)},
+    {"name": "Category E", "size": 3908, "fill": rx.color("red", 8)},
+    {"name": "Category F", "size": 4800, "fill": rx.color("purple", 8)},
+]
+
+
+def treemap_simple():
+    return rx.recharts.treemap(
+        data=data,
+        data_key="size",
+        name_key="name",
+        width="100%",
+        height=300,
+    )
+```
+
+## Aspect Ratio
+
+The `aspect_ratio` prop controls the target width-to-height ratio the treemap uses when laying out each rectangle. Lower values produce taller tiles; higher values produce wider ones.
+
+```python demo graphing
+data = [
+    {"name": "Group A", "size": 2400, "fill": rx.color("accent", 8)},
+    {"name": "Group B", "size": 4567, "fill": rx.color("cyan", 8)},
+    {"name": "Group C", "size": 1398, "fill": rx.color("grass", 8)},
+    {"name": "Group D", "size": 6800, "fill": rx.color("amber", 8)},
+    {"name": "Group E", "size": 3908, "fill": rx.color("plum", 8)},
+]
+
+
+def treemap_aspect():
+    return rx.recharts.treemap(
+        data=data,
+        data_key="size",
+        name_key="name",
+        aspect_ratio=1,
+        width="100%",
+        height=300,
+    )
+```
+
+## Related Charts
+
+Explore more chart types you can build with Reflex and Recharts in pure Python:
+
+- [Pie Chart](/docs/library/graphing/charts/piechart)
+- [Bar Chart](/docs/library/graphing/charts/barchart)
+- [Funnel Chart](/docs/library/graphing/charts/funnelchart)
diff --git a/docs/library/graphing/other-charts/plotly.md b/docs/library/graphing/other-charts/plotly.md
index 80143608571..4bd3f2840db 100644
--- a/docs/library/graphing/other-charts/plotly.md
+++ b/docs/library/graphing/other-charts/plotly.md
@@ -1,9 +1,11 @@
 ---
 components:
   - rx.plotly
+title: Plotly
+meta_description: "Use Plotly in Python with Reflex. The rx.plotly component renders interactive Plotly and Plotly Express figures — line charts, scatter plots, heatmaps, and histograms — in your web app, all in pure Python."
 ---
 
-# Plotly
+# Plotly in Python: Interactive Charts with Reflex
 
 ```python exec
 import reflex as rx
@@ -12,7 +14,7 @@ import plotly.express as px
 import plotly.graph_objects as go
 ```
 
-Plotly is a graphing library that can be used to create interactive graphs. Use the rx.plotly component to wrap Plotly as a component for use in your web page. Checkout [Plotly](https://plotly.com/graphing-libraries/) for more information.
+[Plotly](https://plotly.com/graphing-libraries/) is a popular Python graphing library for creating interactive, publication-quality charts. Reflex wraps it with the `rx.plotly` component so you can embed any Plotly or Plotly Express figure — line charts, scatter plots, histograms, heatmaps, or 3D surface plots — directly into a Python web app with no JavaScript. Because Reflex compiles to a full-stack web app, these charts stay interactive in the browser and can update live from your app state.
 
 ```md alert info
 # When integrating Plotly graphs into your UI code, note that the method for displaying the graph differs from a regular Python script. Instead of using `fig.show()`, use `rx.plotly(data=fig)` within your UI code to ensure the graph is properly rendered and displayed within the user interface
@@ -35,6 +37,100 @@ def line_chart():
     )
 ```
 
+## Plotly Express Chart Types
+
+[Plotly Express](https://plotly.com/python/plotly-express/) (`plotly.express`, imported as `px`) builds common chart types in a single line of Python, and every figure renders in Reflex with `rx.plotly`.
+
+### Bar Chart
+
+Create a Plotly Express bar chart with `px.bar`:
+
+```python demo exec
+oceania = px.data.gapminder().query("continent == 'Oceania'")
+bar_fig = px.bar(
+    oceania, x="year", y="pop", color="country", title="Population of Oceania"
+)
+
+
+def plotly_bar_chart():
+    return rx.center(rx.plotly(data=bar_fig))
+```
+
+### Scatter Plot
+
+Create a Plotly scatter plot with `px.scatter`:
+
+```python demo exec
+iris = px.data.iris()
+scatter_fig = px.scatter(
+    iris,
+    x="sepal_width",
+    y="sepal_length",
+    color="species",
+    title="Iris sepal dimensions",
+)
+
+
+def plotly_scatter_plot():
+    return rx.center(rx.plotly(data=scatter_fig))
+```
+
+### Pie Chart
+
+Create a Plotly pie chart with `px.pie`:
+
+```python demo exec
+tips = px.data.tips()
+pie_fig = px.pie(tips, values="tip", names="day", title="Tips by day")
+
+
+def plotly_pie_chart():
+    return rx.center(rx.plotly(data=pie_fig))
+```
+
+### Heatmap
+
+Create a Plotly heatmap with `px.density_heatmap`:
+
+```python demo exec
+tips_data = px.data.tips()
+heatmap_fig = px.density_heatmap(
+    tips_data, x="total_bill", y="tip", title="Bill vs tip density heatmap"
+)
+
+
+def plotly_heatmap():
+    return rx.center(rx.plotly(data=heatmap_fig))
+```
+
+### Histogram
+
+Create a Plotly histogram with `px.histogram`:
+
+```python demo exec
+hist_data = px.data.tips()
+histogram_fig = px.histogram(
+    hist_data, x="total_bill", nbins=20, title="Distribution of total bills"
+)
+
+
+def plotly_histogram():
+    return rx.center(rx.plotly(data=histogram_fig))
+```
+
+### Box Plot
+
+Create a Plotly box plot with `px.box`:
+
+```python demo exec
+box_data = px.data.tips()
+box_fig = px.box(box_data, x="day", y="total_bill", title="Total bill by day")
+
+
+def plotly_box_plot():
+    return rx.center(rx.plotly(data=box_fig))
+```
+
 ## Locale Configuration
 
 Use `locale` to localize Plotly number/date formatting and modebar labels:
diff --git a/docs/library/graphing/other-charts/pyplot.md b/docs/library/graphing/other-charts/pyplot.md
index 99b42be72f8..cbc05f2711e 100644
--- a/docs/library/graphing/other-charts/pyplot.md
+++ b/docs/library/graphing/other-charts/pyplot.md
@@ -1,6 +1,8 @@
 ---
 components:
   - pyplot
+title: Pyplot
+meta_description: "Display Matplotlib and pyplot figures in Python with Reflex. The reflex-pyplot component renders any Matplotlib plot in your web app — interactive, dark-mode aware, all in pure Python."
 ---
 
 ```python exec
@@ -15,7 +17,7 @@ from reflex.style import toggle_color_mode
 
 # Pyplot
 
-Pyplot (`reflex-pyplot`) is a graphing library that wraps Matplotlib. Use the `pyplot` component to display any Matplotlib plot in your app. Check out [Matplotlib](https://matplotlib.org/) for more information.
+Pyplot (`reflex-pyplot`) is a graphing library that wraps Matplotlib for use in Reflex. Use the `pyplot` component to display any Matplotlib or `matplotlib.pyplot` plot in your app, all in pure Python. Check out [Matplotlib](https://matplotlib.org/) for more information.
 
 ## Installation
 
diff --git a/tests/units/docgen/test_markdown.py b/tests/units/docgen/test_markdown.py
index 75d4d16a56e..2da63b8b1e4 100644
--- a/tests/units/docgen/test_markdown.py
+++ b/tests/units/docgen/test_markdown.py
@@ -107,6 +107,27 @@ def test_component_previews():
     assert preview.source.startswith("lambda")
 
 
+def test_meta_description_not_treated_as_preview():
+    """SEO frontmatter keys are excluded from component-preview detection.
+
+    ``meta_description``/``description`` are string-valued frontmatter keys, so
+    without being in the known-keys set they would be misparsed as component
+    preview lambdas. They must be ignored as previews but stay in ``metadata``.
+    """
+    source = (
+        "---\ncomponents:\n  - rx.recharts.BarChart\n"
+        "title: Bar Chart\n"
+        "meta_description: Create interactive bar charts in Python with Reflex.\n"
+        "description: A longer description that also should not become a preview.\n"
+        "---\n# Bar Chart\n"
+    )
+    fm = parse_document(source).frontmatter
+    assert fm is not None
+    assert fm.component_previews == ()
+    assert fm.title == "Bar Chart"
+    assert str(fm.metadata["meta_description"]).startswith("Create interactive bar")
+
+
 def test_multiple_previews():
     """Multiple component preview lambdas are extracted."""
     source = "---\ncomponents:\n  - rx.input\n\nInput: |\n  lambda **props: rx.input(**props)\n\nInputSlot: |\n  lambda **props: rx.input(rx.input.slot(**props))\n---\n# Input\n"