diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsAreaChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsAreaChart.tsx
new file mode 100644
index 00000000000..f9a758b240f
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsAreaChart.tsx
@@ -0,0 +1,85 @@
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartGroup,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { Switch } from '@patternfly/react-core';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsAreaChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];
+  const data1: PetData[] = [
+    { name: 'Cats', x: '2015', y: 3 },
+    { name: 'Cats', x: '2016', y: 4 },
+    { name: 'Cats', x: '2017', y: 8 },
+    { name: 'Cats', x: '2018', y: 6 }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Dogs', x: '2015', y: 2 },
+    { name: 'Dogs', x: '2016', y: 3 },
+    { name: 'Dogs', x: '2017', y: 4 },
+    { name: 'Dogs', x: '2018', y: 5 },
+    { name: 'Dogs', x: '2019', y: 6 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: '2015', y: 1 },
+    { name: 'Birds', x: '2016', y: 2 },
+    { name: 'Birds', x: '2017', y: 3 },
+    { name: 'Birds', x: '2018', y: 2 },
+    { name: 'Birds', x: '2019', y: 4 }
+  ];
+
+  return (
+    <>
+      <Switch id="area-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '200px', width: '800px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Area chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={200}
+          maxDomain={{ y: 9 }}
+          name="chart1"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={800}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartGroup>
+            <ChartArea data={data1} interpolation="monotoneX" />
+            <ChartArea data={data2} interpolation="monotoneX" />
+            <ChartArea data={data3} interpolation="monotoneX" />
+          </ChartGroup>
+        </Chart>
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBarChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBarChart.tsx
new file mode 100644
index 00000000000..35e8c2ceecb
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBarChart.tsx
@@ -0,0 +1,92 @@
+import { Switch } from '@patternfly/react-core';
+import {
+  Chart,
+  ChartBar,
+  ChartAxis,
+  ChartGroup,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsBarChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  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 (
+    <>
+      <Switch id="bar-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '250px', width: '600px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Bar chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          domain={{ y: [0, 9] }}
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={250}
+          name="chart2"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={600}
+        >
+          <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/Skeletons/examples/SkeletonsBoxPlotChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBoxPlotChart.tsx
new file mode 100644
index 00000000000..6a89f4ca625
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBoxPlotChart.tsx
@@ -0,0 +1,56 @@
+import { Switch } from '@patternfly/react-core';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number[];
+}
+
+export const SkeletonsBoxPlotChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: PetData[] = [{ name: 'Cats' }];
+  const data: PetData[] = [
+    { name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
+    { name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
+    { name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
+    { name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
+  ];
+
+  return (
+    <>
+      <Switch id="boxplot-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '300px', width: '750px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Bar chart example"
+          domain={{ y: [0, 12] }}
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={300}
+          name="chart3"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={750}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartBoxPlot data={data} />
+        </Chart>
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBulletChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBulletChart.tsx
new file mode 100644
index 00000000000..27ce6fa524b
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBulletChart.tsx
@@ -0,0 +1,63 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface Data {
+  name?: string;
+  y?: number;
+}
+
+export const SkeletonsBulletChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const comparativeWarningMeasureData: Data[] = [{ name: 'Warning', y: 88 }];
+  const comparativeWarningMeasureLegendData: Data[] = [{ name: 'Warning' }];
+  const primarySegmentedMeasureData: Data[] = [
+    { name: 'Measure', y: 25 },
+    { name: 'Measure', y: 60 }
+  ];
+  const primarySegmentedMeasureLegendData: Data[] = [{ name: 'Measure' }, { name: 'Measure' }];
+  const qualitativeRangeData: Data[] = [
+    { name: 'Range', y: 50 },
+    { name: 'Range', y: 75 }
+  ];
+  const qualitativeRangeLegendData: Data[] = [{ name: 'Range' }, { name: 'Range' }];
+
+  return (
+    <>
+      <Switch id="bullet-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '200px', width: '600px' }}>
+        <ChartBullet
+          ariaDesc="Storage capacity"
+          ariaTitle="Bullet chart example"
+          comparativeWarningMeasureData={comparativeWarningMeasureData}
+          comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
+          constrainToVisibleArea
+          height={200}
+          labels={({ datum }) => `${datum.name}: ${datum.y}`}
+          legendComponent={<ChartLegend gutter={isChecked ? 50 : undefined} />}
+          maxDomain={{ y: 100 }}
+          name="chart4"
+          padding={{
+            bottom: 50,
+            left: 150, // Adjusted to accommodate labels
+            right: 50,
+            top: 50
+          }}
+          primarySegmentedMeasureData={primarySegmentedMeasureData}
+          primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
+          qualitativeRangeData={qualitativeRangeData}
+          qualitativeRangeLegendData={qualitativeRangeLegendData}
+          subTitle="Details"
+          title="Text label"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={600}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutChart.tsx
new file mode 100644
index 00000000000..dcc2b31f7fd
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutChart.tsx
@@ -0,0 +1,42 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsDonutChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const data: PetData[] = [
+    { x: 'Cats', y: 35 },
+    { x: 'Dogs', y: 55 },
+    { x: 'Birds', y: 10 }
+  ];
+
+  return (
+    <>
+      <Switch id="donut-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '230px', width: '230px' }}>
+        <ChartDonut
+          ariaDesc="Average number of pets"
+          ariaTitle="Donut chart example"
+          constrainToVisibleArea
+          data={data}
+          labels={({ datum }) => `${datum.x}: ${datum.y}%`}
+          name="chart5"
+          subTitle="Pets"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          title="100"
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutUtilizationChart.tsx b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutUtilizationChart.tsx
new file mode 100644
index 00000000000..1ab3ac3537d
--- /dev/null
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutUtilizationChart.tsx
@@ -0,0 +1,54 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface Data {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsDonutUtilizationChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: Data[] = [{ name: `Storage capacity: 75%` }, { name: 'Unused' }];
+  const data: Data = { x: 'GBps capacity', y: 35 };
+
+  return (
+    <>
+      <Switch
+        id="donut-utilization-skeleton-switch"
+        label="Enable skeleton"
+        isChecked={isChecked}
+        onChange={handleChange}
+      />
+      <div style={{ height: '230px', width: '435px' }}>
+        <ChartDonutUtilization
+          ariaDesc="Storage capacity"
+          ariaTitle="Donut utilization chart example"
+          constrainToVisibleArea
+          data={data}
+          labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+          legendData={legendData}
+          legendOrientation="vertical"
+          name="chart6"
+          padding={{
+            bottom: 20,
+            left: 20,
+            right: 225, // Adjusted to accommodate legend
+            top: 20
+          }}
+          subTitle="of 100 GBps"
+          title="35%"
+          thresholds={[{ value: 60 }, { value: 90 }]}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={435}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md
index 950ae09a827..494656c0027 100644
--- a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md
+++ b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md
@@ -35,335 +35,33 @@ The examples below are based on the [Victory](https://formidable.com/open-source
 
 ## Examples
 ### Area chart
-```js
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
-import { Switch } from '@patternfly/react-core';
-
-export const ChartAreaSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
+```ts file = "SkeletonsAreaChart.tsx"
 
-  return (
-    <>
-      <Switch
-        id="area-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{ height: '200px', width: '800px' }}>
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Area chart example"
-          containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-          legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-          legendOrientation="vertical"
-          legendPosition="right"
-          height={200}
-          maxDomain={{y: 9}}
-          name="chart1"
-          padding={{
-            bottom: 50,
-            left: 50,
-            right: 200, // Adjusted to accommodate legend
-            top: 50
-          }}
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          width={800}
-        >
-          <ChartAxis />
-          <ChartAxis dependentAxis showGrid/>
-          <ChartGroup>
-            <ChartArea
-              data={[
-                { name: 'Cats', x: '2015', y: 3 },
-                { name: 'Cats', x: '2016', y: 4 },
-                { name: 'Cats', x: '2017', y: 8 },
-                { name: 'Cats', x: '2018', y: 6 }
-              ]}
-              interpolation="monotoneX"
-            />
-            <ChartArea
-              data={[
-                { name: 'Dogs', x: '2015', y: 2 },
-                { name: 'Dogs', x: '2016', y: 3 },
-                { name: 'Dogs', x: '2017', y: 4 },
-                { name: 'Dogs', x: '2018', y: 5 },
-                { name: 'Dogs', x: '2019', y: 6 }
-              ]}
-              interpolation="monotoneX"
-            />
-            <ChartArea
-              data={[
-                { name: 'Birds', x: '2015', y: 1 },
-                { name: 'Birds', x: '2016', y: 2 },
-                { name: 'Birds', x: '2017', y: 3 },
-                { name: 'Birds', x: '2018', y: 2 },
-                { name: 'Birds', x: '2019', y: 4 }
-              ]}
-              interpolation="monotoneX"
-            />
-          </ChartGroup>
-        </Chart>
-      </div>
-    </>
-  );
-}
 ```
 
 ### Bar chart
-```js
-import { Switch } from '@patternfly/react-core';
-import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
-
-export const ChartBarSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
+```ts file = "SkeletonsBarChart.tsx"
 
-  return (
-    <>
-      <Switch
-        id="bar-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{ height: '250px', width: '600px' }}>
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Bar chart example"
-          containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-          domain={{y: [0,9]}}
-          domainPadding={{ x: [30, 25] }}
-          legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
-          legendOrientation="vertical"
-          legendPosition="right"
-          height={250}
-          name="chart2"
-          padding={{
-            bottom: 50,
-            left: 50,
-            right: 200, // Adjusted to accommodate legend
-            top: 50
-          }}
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          width={600}
-        >
-          <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>
-    </>
-  );
-}
 ```
 
 ### Box plot chart
-```js
-import { Switch } from '@patternfly/react-core'
-import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "SkeletonsBoxPlotChart.tsx"
 
-export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
-
-  return (
-    <>
-      <Switch
-        id="boxplot-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{ height: '300px', width: '750px' }}>
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Bar chart example"
-          domain={{y: [0, 12]}}
-          domainPadding={{ x: [30, 25] }}
-          legendData={[{ name: 'Cats' }]}
-          legendOrientation="vertical"
-          legendPosition="right"
-          height={300}
-          name="chart3"
-          padding={{
-            bottom: 50,
-            left: 50,
-            right: 200, // Adjusted to accommodate legend
-            top: 50
-          }}
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          width={750}
-        >
-          <ChartAxis />
-          <ChartAxis dependentAxis showGrid />
-          <ChartBoxPlot
-            data={[
-              { name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
-              { name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
-              { name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
-              { name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
-            ]}
-          />
-        </Chart>
-      </div>
-    </>
-  );
-}
 ```
 
 ### Bullet chart
-```js
-import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "SkeletonsBulletChart.tsx"
 
-export const ChartBulletSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
-
-  return (
-    <>
-      <Switch
-        id="bullet-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{ height: '200px', width: '600px' }}>
-        <ChartBullet
-          ariaDesc="Storage capacity"
-          ariaTitle="Bullet chart example"
-          comparativeWarningMeasureData={[{name: 'Warning', y: 88}]}
-          comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-          constrainToVisibleArea
-          height={200}
-          labels={({ datum }) => `${datum.name}: ${datum.y}`}
-          legendComponent={<ChartLegend gutter={isChecked ? 50 : undefined} />}
-          maxDomain={{y: 100}}
-          name="chart4"
-          padding={{
-            bottom: 50,
-            left: 150, // Adjusted to accommodate labels
-            right: 50,
-            top: 50
-          }}
-          primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}
-          primarySegmentedMeasureLegendData={[{ name: 'Measure' }, { name: 'Measure' }]}
-          qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
-          qualitativeRangeLegendData={[{ name: 'Range' }, { name: 'Range' }]}
-          subTitle="Details"
-          title="Text label"
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          width={600}
-        />
-      </div>
-    </>
-  );
-}
 ```
 
 ### Donut chart
-```js
-import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
-
-export const ChartDonutSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
+```ts file = "SkeletonsDonutChart.tsx"
 
-  return (
-    <>
-      <Switch
-        id="donut-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{ height: '230px', width: '230px' }}>
-        <ChartDonut 
-          ariaDesc="Average number of pets"
-          ariaTitle="Donut chart example"
-          constrainToVisibleArea
-          data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-          labels={({ datum }) => `${datum.x}: ${datum.y}%`}
-          name="chart5"
-          subTitle="Pets"
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          title="100"
-        />
-      </div>
-    </>
-  );
-}
 ```
 
 ### Donut utilization chart
-```js
-import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "SkeletonsDonutUtilizationChart.tsx"
 
-export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = useState<boolean>(true);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
-
-  return (
-    <>
-      <Switch
-        id="donut-utilization-skeleton-switch"
-        label="Enable skeleton"
-        isChecked={isChecked}
-        onChange={handleChange}
-      />
-      <div style={{  height: '230px', width: '435px' }}>
-        <ChartDonutUtilization
-          ariaDesc="Storage capacity"
-          ariaTitle="Donut utilization chart example"
-          constrainToVisibleArea
-          data={{ x: 'GBps capacity', y: 35 }}
-          labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
-          legendData={[{ name: `Storage capacity: 75%` }, { name: 'Unused' }]}
-          legendOrientation="vertical"
-          name="chart6"
-          padding={{
-            bottom: 20,
-            left: 20,
-            right: 225, // Adjusted to accommodate legend
-            top: 20
-          }}
-          subTitle="of 100 GBps"
-          title="35%"
-          thresholds={[{ value: 60 }, { value: 90 }]}
-          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
-          width={435}
-        />
-      </div>
-    </>
-  );
-}
 ```
 
 ### Donut utilization threshold