From f1e1d833aae27360c8240d9174a10c314766dc77 Mon Sep 17 00:00:00 2001
From: "NEDIE.YASSIN" <67947969+nedieyassin@users.noreply.github.com>
Date: Tue, 11 Aug 2026 15:54:06 +0200
Subject: [PATCH 1/2] Fixed typo in react/quick-start.md for Chart component
 code example

---
 docs/framework/react/quick-start.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md
index 702d9200..f98df9a1 100644
--- a/docs/framework/react/quick-start.md
+++ b/docs/framework/react/quick-start.md
@@ -190,7 +190,7 @@ tooltip entry:
 ```tsx
 import { Chart } from '@tanstack/charts/react/tooltip'
 
-;<Chart
+<Chart
   definition={letterFrequencyChart}
   height={320}
   ariaLabel="English letter frequencies"

From b700488d9235e93c00000e1576a020a6fcb40a0a Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 3 Sep 2026 11:08:29 -0600
Subject: [PATCH 2/2] Complete React tooltip example

---
 docs/framework/react/quick-start.md           | 26 +++++++++++--------
 .../docs/framework/react/quick-start.md       | 26 +++++++++++--------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md
index 21e398b5..7af7c632 100644
--- a/docs/framework/react/quick-start.md
+++ b/docs/framework/react/quick-start.md
@@ -196,17 +196,21 @@ tooltip entry:
 ```tsx
 import { Chart } from '@tanstack/charts/react/tooltip'
 
-<Chart
-  definition={letterFrequencyChart}
-  height={320}
-  ariaLabel="English letter frequencies"
-  renderTooltipBody={({ defaultBody, pinned, dismiss }) => (
-    <>
-      {defaultBody}
-      {pinned ? <button onClick={dismiss}>Close</button> : null}
-    </>
-  )}
-/>
+export function ChartWithCustomTooltip() {
+  return (
+    <Chart
+      definition={letterFrequencyChart}
+      height={320}
+      ariaLabel="English letter frequencies"
+      renderTooltipBody={({ defaultBody, pinned, dismiss }) => (
+        <>
+          {defaultBody}
+          {pinned ? <button onClick={dismiss}>Close</button> : null}
+        </>
+      )}
+    />
+  )
+}
 ```
 
 Existing `renderTooltipBody` users should migrate the component import from
diff --git a/packages/charts-core/docs/framework/react/quick-start.md b/packages/charts-core/docs/framework/react/quick-start.md
index fb49776c..7af7c632 100644
--- a/packages/charts-core/docs/framework/react/quick-start.md
+++ b/packages/charts-core/docs/framework/react/quick-start.md
@@ -196,17 +196,21 @@ tooltip entry:
 ```tsx
 import { Chart } from '@tanstack/charts/react/tooltip'
 
-;<Chart
-  definition={letterFrequencyChart}
-  height={320}
-  ariaLabel="English letter frequencies"
-  renderTooltipBody={({ defaultBody, pinned, dismiss }) => (
-    <>
-      {defaultBody}
-      {pinned ? <button onClick={dismiss}>Close</button> : null}
-    </>
-  )}
-/>
+export function ChartWithCustomTooltip() {
+  return (
+    <Chart
+      definition={letterFrequencyChart}
+      height={320}
+      ariaLabel="English letter frequencies"
+      renderTooltipBody={({ defaultBody, pinned, dismiss }) => (
+        <>
+          {defaultBody}
+          {pinned ? <button onClick={dismiss}>Close</button> : null}
+        </>
+      )}
+    />
+  )
+}
 ```
 
 Existing `renderTooltipBody` users should migrate the component import from