From 11fd5479a0c5c43083b9cb81898f033e5fee89bb Mon Sep 17 00:00:00 2001
From: Mansoor Siddeeq <mansoor@msiddeeq.com>
Date: Wed, 20 Nov 2024 13:12:47 -0500
Subject: [PATCH 1/2] add brush and zoom example to candlestick page

---
 website/docs/charts/candlestick.mdx | 92 +++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/website/docs/charts/candlestick.mdx b/website/docs/charts/candlestick.mdx
index f735f2a4f..343739eda 100644
--- a/website/docs/charts/candlestick.mdx
+++ b/website/docs/charts/candlestick.mdx
@@ -502,6 +502,98 @@ Events can be handled by passing an array of event objects to the `events` prop
 </VictoryChart>
 ```
 
+## Candlestick - Brush and Zoom
+
+```jsx live noInline
+function App() {
+  const sampleData = [
+    {
+      x: 5,
+      open: 5,
+      close: 10,
+      high: 15,
+      low: 0,
+    },
+    {
+      x: 10,
+      open: 10,
+      close: 15,
+      high: 20,
+      low: 5,
+    },
+    {
+      x: 15,
+      open: 15,
+      close: 20,
+      high: 22,
+      low: 10,
+    },
+    {
+      x: 20,
+      open: 20,
+      close: 10,
+      high: 25,
+      low: 7,
+    },
+    {
+      x: 25,
+      open: 10,
+      close: 8,
+      high: 15,
+      low: 5,
+    },
+  ];
+  const [state, setState] = React.useState({});
+
+  const handleZoom = (domain) => {
+    setState({ selectedDomain: domain });
+  };
+
+  const handleBrush = (domain) => {
+    setState({ zoomDomain: domain });
+  };
+
+  return (
+    <div>
+      <VictoryChart
+        theme={VictoryTheme.clean}
+        domainPadding={{ x: 25 }}
+        containerComponent={
+          <VictoryZoomContainer
+            zoomDimension="x"
+            zoomDomain={state.zoomDomain}
+            onZoomDomainChange={handleZoom}
+          />
+        }
+      >
+        <VictoryCandlestick
+          data={sampleData}
+        />
+      </VictoryChart>
+
+      <VictoryChart
+        height={170}
+        theme={VictoryTheme.clean}
+        domainPadding={{ x: 25 }}
+        padding={{top: 0, left: 50, right: 50, bottom: 30}}
+        containerComponent={
+          <VictoryBrushContainer
+            brushDimension="x"
+            brushDomain={state.selectedDomain}
+            onBrushDomainChange={handleBrush}
+          />
+        }
+      >
+        <VictoryAxis />
+        <VictoryCandlestick data={sampleData} />
+      </VictoryChart>
+    </div>
+  )
+}
+
+render(<App />);
+```
+
 ## Standalone Rendering
 
 Box Plot charts can be rendered outside a VictoryChart.

From 3061cf45b1653f04b67251efece98fb92247cc1d Mon Sep 17 00:00:00 2001
From: Mansoor Siddeeq <mansoor@msiddeeq.com>
Date: Wed, 20 Nov 2024 13:17:29 -0500
Subject: [PATCH 2/2] update description text

---
 website/docs/charts/candlestick.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/docs/charts/candlestick.mdx b/website/docs/charts/candlestick.mdx
index 343739eda..9870736d1 100644
--- a/website/docs/charts/candlestick.mdx
+++ b/website/docs/charts/candlestick.mdx
@@ -504,6 +504,8 @@ Events can be handled by passing an array of event objects to the `events` prop
 
 ## Candlestick - Brush and Zoom
 
+Candlestick charts support zoom and pan behavior by using the `VictoryZoomContainer` and `VictoryBrushContainer` components. See the [Brush & Zoom](/docs/guides/brush-and-zoom) guide for more information.
+
 ```jsx live noInline
 function App() {
   const sampleData = [