diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsBarChart.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsBarChart.tsx
new file mode 100644
index 00000000000..584be31d4c6
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsBarChart.tsx
@@ -0,0 +1,80 @@
+import {
+  Chart,
+  ChartAxis,
+  ChartBar,
+  ChartGroup,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsBarChart: React.FunctionComponent = () => {
+  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
+  const data1: PetData[] = [
+    { name: 'Cats', x: '2015', y: 1 },
+    { name: 'Cats', x: '2016', y: 2 },
+    { name: 'Cats', x: '2017', y: 5 },
+    { name: 'Cats', x: '2018', y: 3 }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Dogs', x: '2015', y: 2 },
+    { name: 'Dogs', x: '2016', y: 1 },
+    { name: 'Dogs', x: '2017', y: 7 },
+    { name: 'Dogs', x: '2018', y: 4 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: '2015', y: 4 },
+    { name: 'Birds', x: '2016', y: 4 },
+    { name: 'Birds', x: '2017', y: 9 },
+    { name: 'Birds', x: '2018', y: 7 }
+  ];
+
+  const data4: PetData[] = [
+    { name: 'Mice', x: '2015', y: 3 },
+    { name: 'Mice', x: '2016', y: 3 },
+    { name: 'Mice', x: '2017', y: 8 },
+    { name: 'Mice', x: '2018', y: 5 }
+  ];
+
+  return (
+    <div style={{ height: '275px', width: '450px' }}>
+      <Chart
+        ariaDesc="Average number of pets"
+        ariaTitle="Bar chart example"
+        containerComponent={
+          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+        }
+        domainPadding={{ x: [30, 25] }}
+        legendData={legendData}
+        legendPosition="bottom"
+        hasPatterns
+        height={275}
+        name="chart2"
+        padding={{
+          bottom: 75, // Adjusted to accommodate legend
+          left: 50,
+          right: 50,
+          top: 50
+        }}
+        themeColor={ChartThemeColor.purple}
+        width={450}
+      >
+        <ChartAxis />
+        <ChartAxis dependentAxis showGrid />
+        <ChartGroup offset={11}>
+          <ChartBar data={data1} />
+          <ChartBar data={data2} />
+          <ChartBar data={data3} />
+          <ChartBar data={data4} />
+        </ChartGroup>
+      </Chart>
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsBasicPieChart.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsBasicPieChart.tsx
new file mode 100644
index 00000000000..b14049f62a6
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsBasicPieChart.tsx
@@ -0,0 +1,41 @@
+import { ChartPie } from '@patternfly/react-charts/victory';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsBasicPieChart: React.FunctionComponent = () => {
+  const data: PetData[] = [
+    { x: 'Cats', y: 35 },
+    { x: 'Dogs', y: 55 },
+    { x: 'Birds', y: 10 }
+  ];
+  const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
+
+  return (
+    <div style={{ height: '230px', width: '350px' }}>
+      <ChartPie
+        ariaDesc="Average number of pets"
+        ariaTitle="Pie chart example"
+        constrainToVisibleArea
+        data={data}
+        hasPatterns
+        height={230}
+        labels={({ datum }) => `${datum.x}: ${datum.y}`}
+        legendData={legendData}
+        legendOrientation="vertical"
+        legendPosition="right"
+        name="chart1"
+        padding={{
+          bottom: 20,
+          left: 20,
+          right: 140, // Adjusted to accommodate legend
+          top: 20
+        }}
+        width={350}
+      />
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutChart.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutChart.tsx
new file mode 100644
index 00000000000..45bf8af7574
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutChart.tsx
@@ -0,0 +1,44 @@
+import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsDonutChart: React.FunctionComponent = () => {
+  const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
+
+  const data: PetData[] = [
+    { x: 'Cats', y: 35 },
+    { x: 'Dogs', y: 55 },
+    { x: 'Birds', y: 10 }
+  ];
+
+  return (
+    <div style={{ height: '230px', width: '350px' }}>
+      <ChartDonut
+        ariaDesc="Average number of pets"
+        ariaTitle="Donut chart example"
+        constrainToVisibleArea
+        data={data}
+        hasPatterns
+        labels={({ datum }) => `${datum.x}: ${datum.y}%`}
+        legendData={legendData}
+        legendOrientation="vertical"
+        legendPosition="right"
+        name="chart4"
+        padding={{
+          bottom: 20,
+          left: 20,
+          right: 140, // Adjusted to accommodate legend
+          top: 20
+        }}
+        subTitle="Pets"
+        title="100"
+        themeColor={ChartThemeColor.yellow}
+        width={350}
+      />
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationChart.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationChart.tsx
new file mode 100644
index 00000000000..e32e688be1c
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationChart.tsx
@@ -0,0 +1,40 @@
+import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface Data {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsDonutUtilizationChart: React.FunctionComponent = () => {
+  const data: Data = { x: 'Storage capacity', y: 45 };
+  const legendData: Data[] = [{ name: `Storage capacity: 45%` }, { name: 'Unused' }];
+
+  return (
+    <div style={{ height: '275px', width: '300px' }}>
+      <ChartDonutUtilization
+        ariaDesc="Storage capacity"
+        ariaTitle="Donut utilization chart example"
+        constrainToVisibleArea
+        data={data}
+        hasPatterns
+        height={275}
+        labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+        legendData={legendData}
+        legendPosition="bottom"
+        name="chart5"
+        padding={{
+          bottom: 65, // Adjusted to accommodate legend
+          left: 20,
+          right: 20,
+          top: 20
+        }}
+        subTitle="of 100 GBps"
+        title="45%"
+        themeColor={ChartThemeColor.green}
+        thresholds={[{ value: 60 }, { value: 90 }]}
+        width={300}
+      />
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationThreshold.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationThreshold.tsx
new file mode 100644
index 00000000000..20de55e1613
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationThreshold.tsx
@@ -0,0 +1,52 @@
+import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface Data {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsDonutUtilizationThreshold: React.FunctionComponent = () => {
+  const data1: Data[] = [
+    { x: 'Warning at 60%', y: 60 },
+    { x: 'Danger at 90%', y: 90 }
+  ];
+  const data2: Data = { x: 'Storage capacity', y: 45 };
+  const legendData: Data[] = [
+    { name: `Storage capacity: 45%` },
+    { name: 'Warning threshold at 60%' },
+    { name: 'Danger threshold at 90%' }
+  ];
+
+  return (
+    <div style={{ height: '275px', width: '675px' }}>
+      <ChartDonutThreshold
+        ariaDesc="Storage capacity"
+        ariaTitle="Donut utilization chart with static threshold example"
+        constrainToVisibleArea
+        data={data1}
+        hasPatterns
+        height={275}
+        labels={({ datum }) => (datum.x ? datum.x : null)}
+        name="chart6"
+        padding={{
+          bottom: 65, // Adjusted to accommodate legend
+          left: 20,
+          right: 20,
+          top: 20
+        }}
+        width={675}
+      >
+        <ChartDonutUtilization
+          data={data2}
+          labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+          legendData={legendData}
+          legendPosition="bottom"
+          subTitle="of 100 GBps"
+          title="45%"
+          themeColor={ChartThemeColor.orange}
+        />
+      </ChartDonutThreshold>
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/PatternsStackChart.tsx b/packages/react-charts/src/victory/components/Patterns/examples/PatternsStackChart.tsx
new file mode 100644
index 00000000000..2b285360cef
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Patterns/examples/PatternsStackChart.tsx
@@ -0,0 +1,81 @@
+import {
+  Chart,
+  ChartAxis,
+  ChartBar,
+  ChartStack,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsStackChart: React.FunctionComponent = () => {
+  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
+  const data1: PetData[] = [
+    { name: 'Cats', x: '2015', y: 1 },
+    { name: 'Cats', x: '2016', y: 2 },
+    { name: 'Cats', x: '2017', y: 5 },
+    { name: 'Cats', x: '2018', y: 3 }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Dogs', x: '2015', y: 2 },
+    { name: 'Dogs', x: '2016', y: 1 },
+    { name: 'Dogs', x: '2017', y: 7 },
+    { name: 'Dogs', x: '2018', y: 4 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: '2015', y: 4 },
+    { name: 'Birds', x: '2016', y: 4 },
+    { name: 'Birds', x: '2017', y: 9 },
+    { name: 'Birds', x: '2018', y: 7 }
+  ];
+
+  const data4: PetData[] = [
+    { name: 'Mice', x: '2015', y: 3 },
+    { name: 'Mice', x: '2016', y: 3 },
+    { name: 'Mice', x: '2017', y: 8 },
+    { name: 'Mice', x: '2018', y: 5 }
+  ];
+
+  return (
+    <div style={{ height: '250px', width: '600px' }}>
+      <Chart
+        ariaDesc="Average number of pets"
+        ariaTitle="Stack chart example"
+        containerComponent={
+          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+        }
+        domainPadding={{ x: [30, 25] }}
+        legendData={legendData}
+        legendOrientation="vertical"
+        legendPosition="right"
+        hasPatterns
+        height={250}
+        name="chart3"
+        padding={{
+          bottom: 50,
+          left: 50,
+          right: 200, // Adjusted to accommodate legend
+          top: 50
+        }}
+        themeColor={ChartThemeColor.green}
+        width={600}
+      >
+        <ChartAxis />
+        <ChartAxis dependentAxis showGrid />
+        <ChartStack>
+          <ChartBar data={data1} />
+          <ChartBar data={data2} />
+          <ChartBar data={data3} />
+          <ChartBar data={data4} />
+        </ChartStack>
+      </Chart>
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Patterns/examples/patterns.md b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md
index 7a54238e22a..6fda238acab 100644
--- a/packages/react-charts/src/victory/components/Patterns/examples/patterns.md
+++ b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md
@@ -56,206 +56,39 @@ The examples below are based on the [Victory](https://formidable.com/open-source
 
 ## Examples
 ### Basic pie chart
-```js
-import { ChartPie } from '@patternfly/react-charts/victory';
+```ts file = "PatternsBasicPieChart.tsx"
 
-<div style={{ height: '230px', width: '350px' }}>
-  <ChartPie
-    ariaDesc="Average number of pets"
-    ariaTitle="Pie chart example"
-    constrainToVisibleArea
-    data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-    hasPatterns
-    height={230}
-    labels={({ datum }) => `${datum.x}: ${datum.y}`}
-    legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
-    legendOrientation="vertical"
-    legendPosition="right"
-    name="chart1"
-    padding={{
-      bottom: 20,
-      left: 20,
-      right: 140, // Adjusted to accommodate legend
-      top: 20
-    }}
-    width={350}
-  />
-</div>
 ```
 
 ### Bar chart
-```js
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+```ts file = "PatternsBarChart.tsx"
 
-<div style={{ height: '275px', width: '450px' }}>
-  <Chart
-    ariaDesc="Average number of pets"
-    ariaTitle="Bar chart example"
-    containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-    domainPadding={{ x: [30, 25] }}
-    legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
-    legendPosition="bottom"
-    hasPatterns
-    height={275}
-    name="chart2"
-    padding={{
-      bottom: 75, // Adjusted to accommodate legend
-      left: 50,
-      right: 50,
-      top: 50
-    }}
-    themeColor={ChartThemeColor.purple}
-    width={450}
-  >
-    <ChartAxis />
-    <ChartAxis dependentAxis showGrid />
-    <ChartGroup offset={11}>
-      <ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
-      <ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
-      <ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
-      <ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
-    </ChartGroup>
-  </Chart>
-</div>
 ```
 
 ### Stack chart
-```js
-import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+```ts file = "PatternsStackChart.tsx"
 
-<div style={{ height: '250px', width: '600px' }}>
-  <Chart
-    ariaDesc="Average number of pets"
-    ariaTitle="Stack chart example"
-    containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-    domainPadding={{ x: [30, 25] }}
-    legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
-    legendOrientation="vertical"
-    legendPosition="right"
-    hasPatterns
-    height={250}
-    name="chart3"
-    padding={{
-      bottom: 50,
-      left: 50,
-      right: 200, // Adjusted to accommodate legend
-      top: 50
-    }}
-    themeColor={ChartThemeColor.green}
-    width={600}
-  >
-    <ChartAxis />
-    <ChartAxis dependentAxis showGrid />
-    <ChartStack>
-      <ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
-      <ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
-      <ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
-      <ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
-    </ChartStack>
-  </Chart>
-</div>
 ```
 
 ### Donut chart
-```js
-import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "PatternsDonutChart.tsx"
 
-<div style={{ height: '230px', width: '350px' }}>
-  <ChartDonut
-    ariaDesc="Average number of pets"
-    ariaTitle="Donut chart example"
-    constrainToVisibleArea
-    data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-    hasPatterns
-    labels={({ datum }) => `${datum.x}: ${datum.y}%`}
-    legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
-    legendOrientation="vertical"
-    legendPosition="right"
-    name="chart4"
-    padding={{
-      bottom: 20,
-      left: 20,
-      right: 140, // Adjusted to accommodate legend
-      top: 20
-    }}
-    subTitle="Pets"
-    title="100"
-    themeColor={ChartThemeColor.yellow}
-    width={350}
-  />
-</div>
 ```
 
 ### Donut utilization chart
 
 This demonstrates how to hide a pattern for the static, unused portion of the donut utilization chart.
 
-```js
-import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "PatternsDonutUtilizationChart.tsx"
 
-<div style={{ height: '275px', width: '300px' }}>
-  <ChartDonutUtilization 
-    ariaDesc="Storage capacity"
-    ariaTitle="Donut utilization chart example"
-    constrainToVisibleArea
-    data={{ x: 'Storage capacity', y: 45 }}
-    hasPatterns
-    height={275}
-    labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
-    legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
-    legendPosition="bottom"
-    name="chart5"
-    padding={{
-      bottom: 65, // Adjusted to accommodate legend
-      left: 20,
-      right: 20,
-      top: 20
-    }}
-    subTitle="of 100 GBps"
-    title="45%"
-    themeColor={ChartThemeColor.green}
-    thresholds={[{ value: 60 }, { value: 90 }]}
-    width={300}
-  />
-</div>
 ```
 
 ### Donut utilization chart with thresholds
 
 This demonstrates how to apply patterns to thresholds.
 
-```js
-import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "PatternsDonutUtilizationThreshold.tsx"
 
-<div style={{ height: '275px', width: '675px' }}>
-  <ChartDonutThreshold
-    ariaDesc="Storage capacity"
-    ariaTitle="Donut utilization chart with static threshold example"
-    constrainToVisibleArea
-    data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
-    hasPatterns
-    height={275}
-    labels={({ datum }) => datum.x ? datum.x : null}
-    name="chart6"
-    padding={{
-      bottom: 65, // Adjusted to accommodate legend
-      left: 20,
-      right: 20,
-      top: 20
-    }}
-    width={675}
-  >
-    <ChartDonutUtilization
-      data={{ x: 'Storage capacity', y: 45 }}
-      labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
-      legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
-      legendPosition="bottom"
-      subTitle="of 100 GBps"
-      title="45%"
-      themeColor={ChartThemeColor.orange}
-    />
-  </ChartDonutThreshold>
-</div>
 ```
 
 ### Interactive legend with pie chart