diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
index d7aedb69fcb..509277c0199 100644
--- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
+++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Chart 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
@@ -369,7 +369,7 @@ exports[`Chart 1`] = `
 exports[`Chart 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
@@ -735,7 +735,7 @@ exports[`Chart 2`] = `
 exports[`renders axis and component children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
index 5911d4c1b30..8008576ac03 100644
--- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartArea 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -55,7 +55,7 @@ exports[`ChartArea 1`] = `
 exports[`ChartArea 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -107,7 +107,7 @@ exports[`ChartArea 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
index f2a6215ee2e..1eecd213cff 100644
--- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartAxis 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -227,7 +227,7 @@ exports[`ChartAxis 1`] = `
 exports[`ChartAxis 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -451,7 +451,7 @@ exports[`ChartAxis 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
index 9473de4d039..296636a5fa1 100644
--- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBar 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -95,7 +95,7 @@ A 0 0 0 0 1, 405, 250
 exports[`ChartBar 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -187,7 +187,7 @@ A 0 0 0 0 1, 405, 250
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap
index c12a0e34ea3..af52fc87d1f 100644
--- a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBar 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -183,7 +183,7 @@ exports[`ChartBar 1`] = `
 exports[`ChartBar 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -363,7 +363,7 @@ exports[`ChartBar 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
index 662ebc951d0..77f6d68a424 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletQualitativeRange 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -88,7 +88,7 @@ exports[`ChartBulletQualitativeRange 1`] = `
 exports[`ChartBulletQualitativeRange 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -173,7 +173,7 @@ exports[`ChartBulletQualitativeRange 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap
index cda17a67e44..8239f892627 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletComparativeErrorMeasure 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletComparativeErrorMeasure 1`] = `
 exports[`ChartBulletComparativeErrorMeasure 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletComparativeErrorMeasure 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap
index 1b7a6e5bcee..b508d211b9f 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletComparativeMeasure 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletComparativeMeasure 1`] = `
 exports[`ChartBulletComparativeMeasure 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletComparativeMeasure 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap
index 373fb041e82..4a15d5900e2 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletComparativeZeroMeasure 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletComparativeZeroMeasure 1`] = `
 exports[`ChartBulletComparativeZeroMeasure 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletComparativeZeroMeasure 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap
index fc774fe1657..177e6375c06 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletGroupTitle 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletGroupTitle 1`] = `
 exports[`ChartBulletGroupTitle 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletGroupTitle 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap
index df68f16a66d..5637c335815 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletPrimaryDotMeasure 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletPrimaryDotMeasure 1`] = `
 exports[`ChartBulletPrimaryDotMeasure 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletPrimaryDotMeasure 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap
index cb8abdf868f..96b65bb4cb8 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletPrimarySegmentedMeasure 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletPrimarySegmentedMeasure 1`] = `
 exports[`ChartBulletPrimarySegmentedMeasure 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletPrimarySegmentedMeasure 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
index 4860824a1be..a00541b5691 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletQualitativeRange 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletQualitativeRange 1`] = `
 exports[`ChartBulletQualitativeRange 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletQualitativeRange 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap
index 07eaa0ca462..78f98938eeb 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartBulletTitle 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartBulletTitle 1`] = `
 exports[`ChartBulletTitle 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartBulletTitle 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
index 60213694448..7ad45d26e82 100644
--- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartContainer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -26,7 +26,7 @@ exports[`ChartContainer 1`] = `
 exports[`ChartContainer 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -49,7 +49,7 @@ exports[`ChartContainer 2`] = `
 exports[`renders container via ChartLegend 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap
index a325f8df732..2d8070d8ef9 100644
--- a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartVoronoiContainer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -26,7 +26,7 @@ exports[`ChartVoronoiContainer 1`] = `
 exports[`ChartVoronoiContainer 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -49,7 +49,7 @@ exports[`ChartVoronoiContainer 2`] = `
 exports[`renders container via ChartGroup 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap
index 95e5e0b8ee6..527145168bf 100644
--- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ChartTooltip 2`] = `<DocumentFragment />`;
 exports[`allows tooltip via container component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap
index e36640e04a5..bab9d448e17 100644
--- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ChartCursorTooltip 2`] = `<DocumentFragment />`;
 exports[`allows tooltip via container component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
index 35ea5656af7..4426b2cfebd 100644
--- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartDonut 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -68,7 +68,7 @@ exports[`ChartDonut 1`] = `
 exports[`ChartDonut 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -133,7 +133,7 @@ exports[`ChartDonut 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
index bc6aa273690..9c805ef5304 100644
--- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartDonutThreshold 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -40,7 +40,7 @@ exports[`ChartDonutThreshold 1`] = `
 exports[`ChartDonutThreshold 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -77,7 +77,7 @@ exports[`ChartDonutThreshold 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
index 234c9403a0e..9b036a9ae78 100644
--- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartDonutUtilization 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -47,7 +47,7 @@ exports[`ChartDonutUtilization 1`] = `
 exports[`ChartDonutUtilization 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -91,7 +91,7 @@ exports[`ChartDonutUtilization 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
index 5fc581b812f..585eb2efd5e 100644
--- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartGroup 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartGroup 1`] = `
 exports[`ChartGroup 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartGroup 2`] = `
 exports[`renders container children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
index 696c48df2a6..83a167ae46e 100644
--- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartLegend 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -95,7 +95,7 @@ exports[`ChartLegend 1`] = `
 exports[`ChartLegend 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -187,7 +187,7 @@ exports[`ChartLegend 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
index e22358b5a40..9c03f7ef419 100644
--- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ChartLegendTooltip 2`] = `<DocumentFragment />`;
 exports[`allows tooltip via container component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
index faef1eaa3fb..f2ecdfdd881 100644
--- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartLine 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -55,7 +55,7 @@ exports[`ChartLine 1`] = `
 exports[`ChartLine 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -107,7 +107,7 @@ exports[`ChartLine 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
index 98981c12815..929d6a369c0 100644
--- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartPie 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -68,7 +68,7 @@ exports[`ChartPie 1`] = `
 exports[`ChartPie 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -133,7 +133,7 @@ exports[`ChartPie 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
index 94dab787a27..efd1cf1a18a 100644
--- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartPoint 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -95,7 +95,7 @@ exports[`ChartPoint 1`] = `
 exports[`ChartPoint 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -187,7 +187,7 @@ exports[`ChartPoint 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap
index b97d4559df6..52b97bf7767 100644
--- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartScatter 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -492,7 +492,7 @@ exports[`ChartScatter 1`] = `
 exports[`ChartScatter 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -981,7 +981,7 @@ exports[`ChartScatter 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
index d75441c572a..ac23405c615 100644
--- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartStack 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -30,7 +30,7 @@ exports[`ChartStack 1`] = `
 exports[`ChartStack 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -57,7 +57,7 @@ exports[`ChartStack 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap
index 6ed52ab4159..ca10435834b 100644
--- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartThreshold 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="width: 100%; height: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -55,7 +55,7 @@ exports[`ChartThreshold 1`] = `
 exports[`ChartThreshold 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="width: 100%; height: 100%; pointer-events: none; position: relative;"
   >
     <svg
@@ -107,7 +107,7 @@ exports[`ChartThreshold 2`] = `
 exports[`renders component data 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
index 790e3e530c5..4ca7526b65f 100644
--- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ChartTooltip 2`] = `<DocumentFragment />`;
 exports[`allows tooltip via container component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg
diff --git a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts b/packages/react-charts/src/components/ChartUtils/chart-helpers.ts
index 66a9fb95300..a2fb26ea9fa 100644
--- a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts
+++ b/packages/react-charts/src/components/ChartUtils/chart-helpers.ts
@@ -21,9 +21,10 @@ export const getClassName = ({ className }: ChartClassNameInterface) => {
   if (className) {
     cleanClassName = className
       .replace(/VictoryContainer/g, '')
+      .replace(/pf-v5-c-chart/g, '')
       .replace(/pf-c-chart/g, '')
       .replace(/\s+/g, ' ')
       .trim();
   }
-  return cleanClassName && cleanClassName.length ? `pf-c-chart ${cleanClassName}` : 'pf-c-chart';
+  return cleanClassName && cleanClassName.length ? `pf-v5-c-chart ${cleanClassName}` : 'pf-v5-c-chart';
 };
diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
index a325f8df732..2d8070d8ef9 100644
--- a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ChartVoronoiContainer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -26,7 +26,7 @@ exports[`ChartVoronoiContainer 1`] = `
 exports[`ChartVoronoiContainer 2`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="pointer-events: none; position: relative; width: 100%; height: 100%;"
   >
     <svg
@@ -49,7 +49,7 @@ exports[`ChartVoronoiContainer 2`] = `
 exports[`renders container via ChartGroup 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
   >
     <svg