From a8c2229773426a66ecde7e6afe977f7a4e122b77 Mon Sep 17 00:00:00 2001
From: Trae Shanks <v-trshan@microsoft.com>
Date: Tue, 19 Apr 2022 14:47:04 -0700
Subject: [PATCH 1/3] Resolves fast pass issue

---
 demo/js/components/victory-chart-demo.js    | 39 +++++++++++++++++----
 packages/victory-chart/src/victory-chart.js | 30 +++++++++-------
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/demo/js/components/victory-chart-demo.js b/demo/js/components/victory-chart-demo.js
index c5b831b65..8e4a897fd 100644
--- a/demo/js/components/victory-chart-demo.js
+++ b/demo/js/components/victory-chart-demo.js
@@ -213,11 +213,20 @@ class App extends React.Component {
       <div className="demo">
         <h1>VictoryChart</h1>
         <div style={containerStyle}>
-          <VictoryChart style={chartStyle} polar>
+          <VictoryChart 
+            polar
+            style={chartStyle} 
+            title="Victory Polar Scatter Chart"
+            desc="Circular graph with a twirl pattern of data points."
+          >
             <VictoryScatter />
           </VictoryChart>
 
-          <VictoryChart style={assign({}, chartStyle, bgStyle)}>
+          <VictoryChart
+            style={assign({}, chartStyle, bgStyle)}  
+            title="Victory Scatter Chart"
+            desc="Graph with scattered data points"
+          >
             <VictoryScatter
               data={[
                 { x: -3, y: -3 },
@@ -227,11 +236,21 @@ class App extends React.Component {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} theme={dependentAxisTheme}>
+          <VictoryChart 
+            style={chartStyle} 
+            theme={dependentAxisTheme}
+            title="Victory Diagonal Scatter Chart"
+            desc="Graph with a diagonal pattern of data points."
+          >
             <VictoryScatter />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} domainPadding={{ x: [0, 20] }}>
+          <VictoryChart 
+            style={chartStyle} 
+            domainPadding={{ x: [0, 20] }}
+            title="Victory Bar Chart"
+            desc="Bar graph"
+          >
             <VictoryAxis dependentAxis style={axisStyle} />
             <VictoryAxis style={axisStyle} tickCount={6} />
             <VictoryBar
@@ -249,7 +268,11 @@ class App extends React.Component {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart 
+            style={chartStyle}
+            title="Victory Bar Chart with label data bars"
+            desc="Bar graph with labeled data bars with different widths."
+          >
             <VictoryAxis tickFormat={(t, i, ts) => `${t}s ${i} ${ts[0]}`} />
             <VictoryBar
               groupComponent={<VictoryClipContainer />}
@@ -262,7 +285,11 @@ class App extends React.Component {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart
+            style={chartStyle}
+            title="Victory Horizontal Bar Graph"
+            desc="Horizontal bar graph data with x and y axis points."
+          >
             <VictoryGroup
               labels={["a", "b", "c"]}
               horizontal
diff --git a/packages/victory-chart/src/victory-chart.js b/packages/victory-chart/src/victory-chart.js
index ef81e2083..abaa811bb 100644
--- a/packages/victory-chart/src/victory-chart.js
+++ b/packages/victory-chart/src/victory-chart.js
@@ -37,6 +37,7 @@ const VictoryChart = (initialProps) => {
 
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
   const {
+    desc,
     eventKey,
     containerComponent,
     standalone,
@@ -46,7 +47,8 @@ const VictoryChart = (initialProps) => {
     height,
     theme,
     polar,
-    name
+    name,
+    title,
   } = modifiedProps;
 
   const axes = props.polar
@@ -90,34 +92,38 @@ const VictoryChart = (initialProps) => {
   const containerProps = React.useMemo(() => {
     if (standalone) {
       return {
+        desc,
         domain,
-        scale,
         width,
         height,
-        standalone,
-        theme,
-        style: style.parent,
         horizontal,
         name,
+        origin: polar ? origin : undefined,
         polar,
         radius,
-        origin: polar ? origin : undefined
+        theme,
+        title,
+        scale,
+        standalone,
+        style: style.parent
       };
     }
     return {};
   }, [
+    desc,
     domain,
-    scale,
-    width,
     height,
-    standalone,
-    theme,
-    style,
     horizontal,
     name,
+    origin,
     polar,
     radius,
-    origin
+    scale,
+    standalone,
+    style,
+    title,
+    theme,
+    width
   ]);
 
   const container = React.useMemo(() => {

From 9b6242d6c937b5b7eeaf587c297ff364e7f1c789 Mon Sep 17 00:00:00 2001
From: Trae Shanks <v-trshan@microsoft.com>
Date: Tue, 19 Apr 2022 14:49:34 -0700
Subject: [PATCH 2/3] Slight code clean up

---
 demo/js/components/victory-chart-demo.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/js/components/victory-chart-demo.js b/demo/js/components/victory-chart-demo.js
index 8e4a897fd..af0b118c7 100644
--- a/demo/js/components/victory-chart-demo.js
+++ b/demo/js/components/victory-chart-demo.js
@@ -217,7 +217,7 @@ class App extends React.Component {
             polar
             style={chartStyle} 
             title="Victory Polar Scatter Chart"
-            desc="Circular graph with a twirl pattern of data points."
+            desc="Circular graph with a twirl pattern of data points"
           >
             <VictoryScatter />
           </VictoryChart>
@@ -240,7 +240,7 @@ class App extends React.Component {
             style={chartStyle} 
             theme={dependentAxisTheme}
             title="Victory Diagonal Scatter Chart"
-            desc="Graph with a diagonal pattern of data points."
+            desc="Graph with a diagonal pattern of data points"
           >
             <VictoryScatter />
           </VictoryChart>
@@ -271,7 +271,7 @@ class App extends React.Component {
           <VictoryChart 
             style={chartStyle}
             title="Victory Bar Chart with label data bars"
-            desc="Bar graph with labeled data bars with different widths."
+            desc="Bar graph with labeled data bars with different widths"
           >
             <VictoryAxis tickFormat={(t, i, ts) => `${t}s ${i} ${ts[0]}`} />
             <VictoryBar
@@ -288,7 +288,7 @@ class App extends React.Component {
           <VictoryChart
             style={chartStyle}
             title="Victory Horizontal Bar Graph"
-            desc="Horizontal bar graph data with x and y axis points."
+            desc="Horizontal bar graph data with x and y axis points"
           >
             <VictoryGroup
               labels={["a", "b", "c"]}

From 6adf9484dbf68156b2ea6a10e9fa774e47811f62 Mon Sep 17 00:00:00 2001
From: Trae Shanks <v-trshan@microsoft.com>
Date: Tue, 26 Apr 2022 11:29:13 -0700
Subject: [PATCH 3/3] formatting update

---
 demo/js/components/victory-chart-demo.js    | 16 ++++++++--------
 packages/victory-chart/src/victory-chart.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/js/components/victory-chart-demo.js b/demo/js/components/victory-chart-demo.js
index af0b118c7..c6a6cea4c 100644
--- a/demo/js/components/victory-chart-demo.js
+++ b/demo/js/components/victory-chart-demo.js
@@ -213,9 +213,9 @@ class App extends React.Component {
       <div className="demo">
         <h1>VictoryChart</h1>
         <div style={containerStyle}>
-          <VictoryChart 
+          <VictoryChart
             polar
-            style={chartStyle} 
+            style={chartStyle}
             title="Victory Polar Scatter Chart"
             desc="Circular graph with a twirl pattern of data points"
           >
@@ -223,7 +223,7 @@ class App extends React.Component {
           </VictoryChart>
 
           <VictoryChart
-            style={assign({}, chartStyle, bgStyle)}  
+            style={assign({}, chartStyle, bgStyle)}
             title="Victory Scatter Chart"
             desc="Graph with scattered data points"
           >
@@ -236,8 +236,8 @@ class App extends React.Component {
             />
           </VictoryChart>
 
-          <VictoryChart 
-            style={chartStyle} 
+          <VictoryChart
+            style={chartStyle}
             theme={dependentAxisTheme}
             title="Victory Diagonal Scatter Chart"
             desc="Graph with a diagonal pattern of data points"
@@ -245,8 +245,8 @@ class App extends React.Component {
             <VictoryScatter />
           </VictoryChart>
 
-          <VictoryChart 
-            style={chartStyle} 
+          <VictoryChart
+            style={chartStyle}
             domainPadding={{ x: [0, 20] }}
             title="Victory Bar Chart"
             desc="Bar graph"
@@ -268,7 +268,7 @@ class App extends React.Component {
             />
           </VictoryChart>
 
-          <VictoryChart 
+          <VictoryChart
             style={chartStyle}
             title="Victory Bar Chart with label data bars"
             desc="Bar graph with labeled data bars with different widths"
diff --git a/packages/victory-chart/src/victory-chart.js b/packages/victory-chart/src/victory-chart.js
index abaa811bb..4260a7b34 100644
--- a/packages/victory-chart/src/victory-chart.js
+++ b/packages/victory-chart/src/victory-chart.js
@@ -48,7 +48,7 @@ const VictoryChart = (initialProps) => {
     theme,
     polar,
     name,
-    title,
+    title
   } = modifiedProps;
 
   const axes = props.polar