diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
index ffcf53e8ffe..8ff784e5cc0 100644
--- a/packages/react-charts/src/components/Chart/Chart.tsx
+++ b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -29,12 +29,11 @@ import {
   getComputedLegend,
   getLabelTextSize,
   getPaddingForSide,
-  getPatternId,
   getPatternDefs,
-  getDefaultColorScale,
   getDefaultData,
-  getDefaultPatternScale
+  getDefaultPatternProps
 } from '../ChartUtils';
+import { PatternScaleInterface } from '../ChartUtils/chart-patterns';
 
 /**
  * See https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/index.d.ts
@@ -94,12 +93,14 @@ export interface ChartProps extends VictoryChartProps {
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   defaultAxes?: AxesType;
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   defaultPolarAxes?: AxesType;
@@ -307,13 +308,6 @@ export interface ChartProps extends VictoryChartProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -326,10 +320,11 @@ export interface ChartProps extends VictoryChartProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   prependDefaultAxes?: boolean;
@@ -372,6 +367,7 @@ export interface ChartProps extends VictoryChartProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -460,18 +456,17 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   ariaTitle,
   children,
   colorScale,
+  isPatternDefs = false,
   legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
   padding,
+  patternScale,
   showAxis = true,
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  patternId = getPatternId(),
-  patternScale,
-  isPatternDefs = false,
 
   // destructure last
   theme = getChartTheme(themeColor, showAxis),
@@ -488,12 +483,11 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     top: getPaddingForSide('top', padding, theme.chart.padding)
   };
 
-  const defaultColorScale = getDefaultColorScale(colorScale as any, theme.chart.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
+  const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({
+    colorScale,
+    isPatternDefs,
     patternScale,
-    patternId,
-    isPatternDefs
+    themeColorScale: theme.chart.colorScale as string[]
   });
 
   // Add pattern props for legend tooltip
@@ -503,7 +497,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     containerComponent.props.labelComponent.type.displayName === 'ChartLegendTooltip'
   ) {
     labelComponent = React.cloneElement(containerComponent.props.labelComponent, {
-      patternId,
       theme,
       ...(defaultPatternScale && { patternScale: defaultPatternScale }),
       ...containerComponent.props.labelComponent.props
@@ -580,7 +573,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
         const { ...childProps } = child.props;
         return React.cloneElement(child, {
           colorScale,
-          patternId,
           theme,
           ...(defaultPatternScale && { patternScale: defaultPatternScale }),
           ...childProps,
@@ -605,7 +597,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     >
       {renderChildren()}
       {getLegend()}
-      {isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })}
+      {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })}
     </VictoryChart>
   );
 };
diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.tsx
index d0e230ae033..44a5a055769 100644
--- a/packages/react-charts/src/components/ChartArea/ChartArea.tsx
+++ b/packages/react-charts/src/components/ChartArea/ChartArea.tsx
@@ -312,6 +312,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx
index f1e820af743..d39d9a4da13 100644
--- a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx
+++ b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx
@@ -296,6 +296,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.tsx
index 5119c13c38a..f53d42a63eb 100644
--- a/packages/react-charts/src/components/ChartBar/ChartBar.tsx
+++ b/packages/react-charts/src/components/ChartBar/ChartBar.tsx
@@ -305,6 +305,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -348,6 +349,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx
index 539e9c0794d..5313d5d4f76 100644
--- a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx
+++ b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx
@@ -73,6 +73,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
index 595eddd8aa2..0983aa19d1f 100644
--- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
+++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
@@ -24,6 +24,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   children?: React.ReactElement | React.ReactElement[];
@@ -134,6 +135,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
index 995d006aa44..db8c8bd2dd9 100644
--- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
+++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
@@ -144,6 +144,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   height?: number;
@@ -257,6 +258,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;
diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
index b0823d83168..f8f6bbb8059 100644
--- a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
+++ b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
@@ -22,7 +22,7 @@ import { ChartContainer } from '../ChartContainer';
 import { ChartLabel } from '../ChartLabel';
 import { ChartPie, ChartPieLegendPosition, ChartPieProps } from '../ChartPie';
 import { ChartCommonStyles, ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme';
-import { getPieLabelX, getPieLabelY, getPaddingForSide } from '../ChartUtils';
+import { getPieLabelX, getPieLabelY, getPaddingForSide, PatternScaleInterface } from '../ChartUtils';
 
 interface ChartDonutSubTitleInterface {
   dy?: number;
@@ -361,13 +361,6 @@ export interface ChartDonutProps extends ChartPieProps {
    * @propType number | Function
    */
   padAngle?: NumberOrCallback;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -380,7 +373,7 @@ export interface ChartDonutProps extends ChartPieProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * The padding props specifies the amount of padding in number of pixels between
    * the edge of the chart and any rendered child components. This prop can be given
@@ -402,6 +395,7 @@ export interface ChartDonutProps extends ChartPieProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
index 2b54538c8e0..e3598a3718c 100644
--- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
+++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
@@ -22,13 +22,10 @@ import { ChartContainer } from '../ChartContainer';
 import { ChartDonut, ChartDonutProps } from '../ChartDonut';
 import { ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme';
 import {
-  getDefaultColorScale,
-  getDefaultPatternScale,
   getDonutThresholdDynamicTheme,
   getDonutThresholdStaticTheme,
   getPaddingForSide,
-  getPatternDefs,
-  getPatternId
+  PatternScaleInterface
 } from '../ChartUtils';
 
 export enum ChartDonutThresholdDonutOrientation {
@@ -109,6 +106,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   children?: React.ReactElement<any>;
@@ -320,13 +318,6 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -339,7 +330,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * Specifies the radius of the chart. If this property is not provided it is computed
    * from width, height, and padding props
@@ -352,13 +343,10 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
-  /**
-   * This will show the static, unused portion of the donut chart
-   */
-  showStatic?: boolean;
   /**
    * Use the sortKey prop to indicate how data should be sorted. This prop
    * is given directly to the lodash sortBy function to be executed on the
@@ -417,6 +405,9 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * Note: Not compatible with theme prop
    *
    * @example themeColor={ChartThemeColor.blue}
+   *
+   * @private
+   * @hide
    */
   themeColor?: string;
   /**
@@ -478,9 +469,9 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   containerComponent = <ChartContainer />,
   data = [],
   invert = false,
+  isPatternDefs = false,
   labels = [], // Don't show any tooltip labels by default, let consumer override if needed
   padding,
-  patternId = getPatternId(),
   patternScale,
   radius,
   standalone = true,
@@ -488,7 +479,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  isPatternDefs = false,
   x,
   y,
 
@@ -512,14 +502,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
       padding: defaultPadding
     });
 
-  const defaultColorScale = getDefaultColorScale(colorScale, theme.pie.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
-    patternScale,
-    patternId,
-    isPatternDefs
-  });
-
   // Returns computed data representing pie chart slices
   const getComputedData = () => {
     // Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
@@ -549,29 +531,28 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   };
 
   // Render dynamic utilization donut cart
+  const computedData = getComputedData();
   const renderChildren = () =>
     React.Children.toArray(children).map((child, index) => {
       if (React.isValidElement(child)) {
         const { data: childData, ...childProps } = child.props;
         const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
         const dynamicTheme = childProps.theme || getDonutThresholdDynamicTheme(childProps.themeColor || themeColor);
-
         return React.cloneElement(child, {
           constrainToVisibleArea,
-          colorScale,
           data: childData,
           endAngle: 360 * (datum[0]._y ? datum[0]._y / 100 : 0),
           height,
           invert,
+          isPatternDefs,
+          isStatic: false,
           key: `pf-chart-donut-threshold-child-${index}`,
           padding: defaultPadding,
-          ...(!childProps.isPatternDefs && defaultPatternScale && { patternScale: [null, ...defaultPatternScale] }),
+          patternUnshiftIndex: isPatternDefs ? computedData.length : undefined,
           radius: chartRadius - 14, // Donut utilization radius is threshold radius minus 14px spacing
-          showStatic: false,
           standalone: false,
           subTitlePosition: childProps.subTitlePosition || subTitlePosition,
           theme: dynamicTheme,
-          hasPatternDefs: isPatternDefs,
           width,
           ...childProps
         });
@@ -585,13 +566,13 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
       allowTooltip={allowTooltip}
       colorScale={colorScale}
       constrainToVisibleArea={constrainToVisibleArea}
-      data={getComputedData()}
+      data={computedData}
       height={height}
+      isPatternDefs={isPatternDefs}
       key="pf-chart-donut-threshold"
       labels={labels}
       padding={defaultPadding}
-      patternId={patternId}
-      patternScale={defaultPatternScale ? defaultPatternScale : undefined}
+      patternScale={patternScale}
       standalone={false}
       theme={theme}
       width={width}
@@ -610,11 +591,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
       theme,
       ...containerComponent.props
     },
-    [
-      chart,
-      renderChildren(),
-      isPatternDefs && getPatternDefs({ offset: 1, patternId, patternScale: defaultColorScale })
-    ]
+    [chart, renderChildren()]
   );
 
   return standalone ? (
@@ -623,7 +600,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
     <React.Fragment>
       {chart}
       {renderChildren()}
-      {isPatternDefs && getPatternDefs({ offset: 1, patternId, patternScale: defaultColorScale })}
     </React.Fragment>
   );
 };
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
index ad4496c962c..26086e65acb 100644
--- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
+++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
@@ -21,7 +21,7 @@ import { SliceProps, VictoryPie, VictorySliceLabelPositionType } from 'victory-p
 import { ChartContainer } from '../ChartContainer';
 import { ChartDonut, ChartDonutProps } from '../ChartDonut';
 import { ChartCommonStyles, ChartThemeDefinition, ChartDonutUtilizationStyles } from '../ChartTheme';
-import { getDefaultColorScale, getDefaultPatternScale, getDonutUtilizationTheme, getPatternId } from '../ChartUtils';
+import { getDonutUtilizationTheme, PatternScaleInterface } from '../ChartUtils';
 
 export enum ChartDonutUtilizationLabelPosition {
   centroid = 'centroid',
@@ -243,13 +243,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * to a <g> tag on web, and a react-native-svg <G> tag on mobile
    */
   groupComponent?: React.ReactElement<any>;
-  /**
-   * Flag indicating parent isPatternDefs prop is in use
-   * Do not use
-   * @hide
-   * @private
-   */
-  hasPatternDefs?: boolean;
   /**
    * Specifies the height the svg viewBox of the chart container. This value should be given as a
    * number of pixels.
@@ -279,6 +272,15 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * @beta
    */
   isPatternDefs?: boolean;
+  /**
+   * This will show the static, unused portion of the donut utilization chart.
+   *
+   * Note: This prop should not be set manually.
+   *
+   * @private
+   * @hide
+   */
+  isStatic?: boolean;
   /**
    * Allows legend items to wrap. A value of true allows the legend to wrap onto the next line
    * if its container is not wide enough.
@@ -389,13 +391,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -408,7 +403,16 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
+  /**
+   * Moves the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold
+   *
+   * Note: This prop should not be set manually.
+   *
+   * @private
+   * @hide
+   */
+  patternUnshiftIndex?: number;
   /**
    * Specifies the radius of the chart. If this property is not provided it is computed
    * from width, height, and padding props
@@ -421,23 +425,10 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
-  /**
-   * This will show the static, unused portion of the donut utilization chart.
-   *
-   * Note: This prop should not be set manually.
-   *
-   * @hide
-   */
-  showStatic?: boolean;
-  /**
-   * This will apply patterns for the static, unused portion of the donut utilization chart.
-   *
-   * @hide
-   */
-  showStaticPattern?: boolean;
   /**
    * Use the sortKey prop to indicate how data should be sorted. This prop
    * is given directly to the lodash sortBy function to be executed on the
@@ -613,14 +604,12 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   colorScale,
   containerComponent = <ChartContainer />,
   data,
-  hasPatternDefs,
   invert = false,
+  isStatic = true,
   legendPosition = ChartCommonStyles.legend.position as ChartDonutUtilizationLegendPosition,
   padding,
-  patternId = getPatternId(),
   patternScale,
-  showStatic = true,
-  showStaticPattern = false,
+  patternUnshiftIndex,
   standalone = true,
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -636,30 +625,11 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   width = theme.pie.width,
   ...rest
 }: ChartDonutUtilizationProps) => {
-  const defaultColorScale = getDefaultColorScale(colorScale, theme.pie.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
-    patternScale,
-    patternId,
-    isPatternDefs
-  });
-
-  // Hide static pattern and handle edge case where parent does not use isPatternDefs
-  const hideStaticPattern = showStatic && !showStaticPattern;
-  const hideThresholdPatterns = !patternScale && hasPatternDefs === false;
-  if (defaultPatternScale && (hideStaticPattern || hideThresholdPatterns)) {
-    for (let i = 0; i < defaultPatternScale.length; i++) {
-      if (i !== 0) {
-        defaultPatternScale[i] = null;
-      }
-    }
-  }
-
   // Returns computed data representing pie chart slices
   const getComputedData = () => {
     const datum = getData();
     const computedData: [{ x?: any; y: any }] = [{ x: datum[0]._x, y: datum[0]._y || 0 }];
-    if (showStatic) {
+    if (isStatic) {
       computedData.push({ y: datum[0]._x ? Math.abs(100 - datum[0]._y) : 100 });
     }
     return computedData;
@@ -692,9 +662,8 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   // Returns theme based on threshold and current value
   const getThresholdTheme = () => {
     const newTheme = { ...theme };
-
-    if (data) {
-      const datum = getData();
+    const datum = getData();
+    if (datum) {
       const donutThresholds = getDonutThresholds();
       const mergeThemeProps = (i: number) => {
         // Merge just the first color of dynamic (blue, green, etc.) with static (gray) for expected colorScale
@@ -731,14 +700,14 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
       colorScale={colorScale}
       data={getComputedData()}
       height={height}
+      isPatternDefs={isPatternDefs}
       key="pf-chart-donut-utilization"
       legendPosition={legendPosition}
       padding={padding}
-      patternId={patternId}
-      patternScale={defaultPatternScale ? defaultPatternScale : undefined}
+      patternScale={patternScale}
+      patternUnshiftIndex={patternUnshiftIndex}
       standalone={false}
       theme={getThresholdTheme()}
-      isPatternDefs={isPatternDefs}
       width={width}
       {...rest}
     />
diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx
index 9aa5523854c..5b3f3c48ce3 100644
--- a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx
+++ b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx
@@ -23,12 +23,11 @@ import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import {
   getClassName,
-  getDefaultColorScale,
-  getDefaultPatternScale,
-  getPatternId,
+  getDefaultPatternProps,
   getPatternDefs,
   getTheme,
-  renderChildrenWithPatterns
+  renderChildrenWithPatterns,
+  PatternScaleInterface
 } from '../ChartUtils';
 
 export enum ChartGroupSortOrder {
@@ -298,13 +297,6 @@ export interface ChartGroupProps extends VictoryGroupProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -317,7 +309,7 @@ export interface ChartGroupProps extends VictoryGroupProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
    */
@@ -362,6 +354,7 @@ export interface ChartGroupProps extends VictoryGroupProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -484,12 +477,11 @@ export const ChartGroup: React.FunctionComponent<ChartGroupProps> = ({
   children,
   colorScale,
   containerComponent = <ChartContainer />,
-  patternId = getPatternId(),
+  isPatternDefs = false,
   patternScale,
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  isPatternDefs = false,
 
   // destructure last
   theme = getTheme(themeColor),
@@ -504,12 +496,11 @@ export const ChartGroup: React.FunctionComponent<ChartGroupProps> = ({
     className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name
   });
 
-  const defaultColorScale = getDefaultColorScale(colorScale, theme.group.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
+  const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({
+    colorScale,
+    isPatternDefs,
     patternScale,
-    patternId,
-    isPatternDefs
+    themeColorScale: theme.group.colorScale as string[]
   });
 
   // Note: containerComponent is required for theme
@@ -517,10 +508,9 @@ export const ChartGroup: React.FunctionComponent<ChartGroupProps> = ({
     <VictoryGroup colorScale={colorScale} containerComponent={container} theme={theme} {...rest}>
       {renderChildrenWithPatterns({
         children,
-        patternId,
         patternScale: defaultPatternScale
       })}
-      {isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })}
+      {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })}
     </VictoryGroup>
   );
 };
diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx
index 4bbc962b85f..f3e1a7fe80c 100644
--- a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx
+++ b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx
@@ -54,6 +54,8 @@ export interface ChartLabelProps extends VictoryLabelProps {
    * Note: This prop should not be set manually.
    *
    * @propType number | string | Function
+   *
+   * @private
    * @hide
    */
   children?: StringOrNumberOrCallback;
@@ -103,6 +105,7 @@ export interface ChartLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   index?: string | number;
@@ -144,6 +147,7 @@ export interface ChartLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -158,6 +162,7 @@ export interface ChartLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   scale?: { x?: any; y?: any };
@@ -199,6 +204,7 @@ export interface ChartLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;
diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx
index ef63f636460..7a235c7276e 100644
--- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx
+++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx
@@ -21,7 +21,7 @@ import { ChartContainer } from '../ChartContainer';
 import { ChartLabel } from '../ChartLabel';
 import { ChartPoint } from '../ChartPoint';
 import { ChartThemeDefinition } from '../ChartTheme';
-import { getTheme } from '../ChartUtils';
+import { getTheme, PatternScaleInterface } from '../ChartUtils';
 
 export enum ChartLegendOrientation {
   horizontal = 'horizontal',
@@ -213,7 +213,7 @@ export interface ChartLegendProps extends VictoryLegendProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * The responsive prop specifies whether the rendered container should be a responsive container with a viewBox
    * attribute, or a static container with absolute width and height.
@@ -238,6 +238,7 @@ export interface ChartLegendProps extends VictoryLegendProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -362,7 +363,7 @@ export const ChartLegend: React.FunctionComponent<ChartLegendProps> = ({
             : undefined;
         const pattern = patternScale[index % patternScale.length];
         const color = colorScale ? colorScale[index % colorScale.length] : themeColor; // Sync color scale
-        return pattern && pattern !== null ? pattern : color;
+        return pattern && pattern.isVisible !== false ? pattern.value : color;
       },
       ..._style.data
     };
diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
index 93326e11a55..24ce64d4ff7 100644
--- a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
+++ b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
@@ -532,11 +532,6 @@ class InteractivePieLegendChart extends React.Component {
       const { hiddenSeries } = this.state; // Skip if already hidden                
       return hiddenSeries.has(index);
     };
-
-    this.isDataAvailable = () => {
-      const { hiddenSeries } = this.state;
-      return hiddenSeries.size !== this.series.length;
-    };
   };
 
   render() {
@@ -544,7 +539,7 @@ class InteractivePieLegendChart extends React.Component {
 
     const data = [];
     this.series.map((s, index) => {
-      data.push(!hiddenSeries.has(index) ? s.datapoints : [{ y: null}]);
+      data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });
     });
 
     return (
@@ -554,7 +549,6 @@ class InteractivePieLegendChart extends React.Component {
           ariaTitle="Pie chart example"
           events={this.getEvents()}
           height={275}
-          labels={({ datum }) => `${datum.x}: ${datum.y}`}
           legendComponent={<ChartLegend name={'legend'} data={this.getLegendData()} />}
           legendPosition="bottom"
           padding={{
@@ -570,6 +564,7 @@ class InteractivePieLegendChart extends React.Component {
           <ChartPie
             constrainToVisibleArea={true}
             data={data}
+            labels={({ datum }) => `${datum.x}: ${datum.y}`}
             name="pie"
           />
         </Chart>
diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
index af664cf53c9..0ef2af6fcc3 100644
--- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
+++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
@@ -18,7 +18,8 @@ import {
   getLegendTooltipSize,
   getLegendTooltipVisibleData,
   getLegendTooltipVisibleText,
-  getTheme
+  getTheme,
+  PatternScaleInterface
 } from '../ChartUtils';
 
 /**
@@ -42,6 +43,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   activePoints?: any[];
@@ -159,6 +161,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   height?: number;
@@ -237,7 +240,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be
    * given as a positive number or a function of datum.
@@ -314,6 +317,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;
diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx
index 895212f7a45..9a575fec9d2 100644
--- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx
+++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx
@@ -11,7 +11,8 @@ import {
   getLegendTooltipSize,
   getLegendTooltipVisibleData,
   getLegendTooltipVisibleText,
-  getTheme
+  getTheme,
+  PatternScaleInterface
 } from '../ChartUtils';
 
 /**
@@ -24,6 +25,7 @@ export interface ChartLegendTooltipContentProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   activePoints?: any[];
@@ -128,7 +130,7 @@ export interface ChartLegendTooltipContentProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or
    * function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which
diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx
index 3069ef17be1..bdf7538f370 100644
--- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx
+++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx
@@ -44,6 +44,8 @@ export interface ChartLegendLabelProps extends VictoryLabelProps {
    * Note: This prop should not be set manually.
    *
    * @propType number | string | Function
+   *
+   * @private
    * @hide
    */
   children?: StringOrNumberOrCallback;
@@ -93,6 +95,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   index?: string | number;
@@ -152,6 +155,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -166,6 +170,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   scale?: { x?: any; y?: any };
@@ -207,6 +212,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;
diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.tsx
index e49368f27ef..4114db58f96 100644
--- a/packages/react-charts/src/components/ChartLine/ChartLine.tsx
+++ b/packages/react-charts/src/components/ChartLine/ChartLine.tsx
@@ -272,6 +272,7 @@ export interface ChartLineProps extends VictoryLineProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -315,6 +316,7 @@ export interface ChartLineProps extends VictoryLineProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx
index 84c78cff522..9ad87bcdbf4 100644
--- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx
+++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx
@@ -29,12 +29,11 @@ import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
 import { ChartTooltip } from '../ChartTooltip';
 import {
   getComputedLegend,
+  getDefaultPatternProps,
   getPaddingForSide,
-  getPatternId,
   getPatternDefs,
   getTheme,
-  getDefaultColorScale,
-  getDefaultPatternScale
+  PatternScaleInterface
 } from '../ChartUtils';
 
 export enum ChartPieLabelPosition {
@@ -363,13 +362,6 @@ export interface ChartPieProps extends VictoryPieProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -382,7 +374,16 @@ export interface ChartPieProps extends VictoryPieProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
+  /**
+   * Moves the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold
+   *
+   * Note: This prop should not be set manually.
+   *
+   * @private
+   * @hide
+   */
+  patternUnshiftIndex?: number;
   /**
    * Specifies the radius of the chart. If this property is not provided it is computed
    * from width, height, and padding props
@@ -395,6 +396,7 @@ export interface ChartPieProps extends VictoryPieProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -501,12 +503,13 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   colorScale,
   constrainToVisibleArea = false,
   containerComponent = <ChartContainer />,
+  isPatternDefs = false,
   legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartPieLegendPosition,
-  patternId = getPatternId(),
   patternScale,
+  patternUnshiftIndex,
   padding,
   radius,
   standalone = true,
@@ -514,7 +517,6 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  isPatternDefs = false,
 
   // destructure last
   theme = getTheme(themeColor),
@@ -534,6 +536,14 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
     right: getPaddingForSide('right', padding, theme.pie.padding),
     top: getPaddingForSide('top', padding, theme.pie.padding)
   };
+
+  const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({
+    colorScale,
+    isPatternDefs,
+    patternScale,
+    themeColorScale: theme.pie.colorScale as string[]
+  });
+
   // Ensure non-negative value is returned
   const getDefaultRadius = () => {
     const result = Helpers.getRadius({
@@ -545,14 +555,6 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   };
   const chartRadius = radius ? radius : getDefaultRadius();
 
-  const defaultColorScale = getDefaultColorScale(colorScale, theme.pie.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
-    patternScale,
-    patternId,
-    isPatternDefs
-  });
-
   // Merge pattern IDs with `style.data.fill` property
   const getDefaultStyle = () => {
     if (!defaultPatternScale) {
@@ -562,7 +564,9 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
     _style.data = {
       fill: ({ slice }: any) => {
         const pattern = defaultPatternScale[slice.index % defaultPatternScale.length];
-        return pattern && pattern !== null ? pattern : defaultColorScale[slice.index % defaultColorScale.length];
+        return pattern && pattern.isVisible !== false
+          ? pattern.value
+          : defaultColorScale[slice.index % defaultColorScale.length].value;
       },
       ..._style.data
     };
@@ -624,7 +628,11 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
           theme,
           ...containerComponent.props
         },
-        [chart, getLegend(), isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })]
+        [
+          chart,
+          getLegend(),
+          isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })
+        ]
       )
     : null;
 
@@ -634,7 +642,7 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
     <React.Fragment>
       {chart}
       {getLegend()}
-      {isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })}
+      {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })}
     </React.Fragment>
   );
 };
diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx
index 116bdcf5e23..9a29a7239d8 100644
--- a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx
+++ b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx
@@ -276,6 +276,7 @@ export interface ChartScatterProps extends VictoryScatterProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -319,6 +320,7 @@ export interface ChartScatterProps extends VictoryScatterProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.tsx
index 73e32fa3acb..734da23166a 100644
--- a/packages/react-charts/src/components/ChartStack/ChartStack.tsx
+++ b/packages/react-charts/src/components/ChartStack/ChartStack.tsx
@@ -21,10 +21,9 @@ import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import {
   getClassName,
-  getDefaultColorScale,
-  getDefaultPatternScale,
-  getPatternId,
+  getDefaultPatternProps,
   getTheme,
+  PatternScaleInterface,
   renderChildrenWithPatterns
 } from '../ChartUtils';
 
@@ -277,13 +276,6 @@ export interface ChartStackProps extends VictoryStackProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
    * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
@@ -296,12 +288,13 @@ export interface ChartStackProps extends VictoryStackProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -340,6 +333,7 @@ export interface ChartStackProps extends VictoryStackProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -418,12 +412,11 @@ export const ChartStack: React.FunctionComponent<ChartStackProps> = ({
   children,
   colorScale,
   containerComponent = <ChartContainer />,
-  patternId = getPatternId(),
+  isPatternDefs = false,
   patternScale,
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  isPatternDefs = false,
 
   // destructure last
   theme = getTheme(themeColor),
@@ -438,12 +431,11 @@ export const ChartStack: React.FunctionComponent<ChartStackProps> = ({
     className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name
   });
 
-  const defaultColorScale = getDefaultColorScale(colorScale, theme.stack.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
+  const { defaultPatternScale } = getDefaultPatternProps({
+    colorScale,
+    isPatternDefs,
     patternScale,
-    patternId,
-    isPatternDefs
+    themeColorScale: theme.stack.colorScale as string[]
   });
 
   // Note: containerComponent is required for theme
@@ -451,7 +443,6 @@ export const ChartStack: React.FunctionComponent<ChartStackProps> = ({
     <VictoryStack colorScale={colorScale} containerComponent={container} theme={theme} {...rest}>
       {renderChildrenWithPatterns({
         children,
-        patternId,
         patternScale: defaultPatternScale
       })}
     </VictoryStack>
diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
index 8cb3cb6d21e..77bb289acd0 100644
--- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
+++ b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
@@ -268,6 +268,7 @@ export interface ChartThresholdProps extends VictoryLineProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -311,6 +312,7 @@ export interface ChartThresholdProps extends VictoryLineProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
index 241a4b0c84b..f661ec351b3 100644
--- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
+++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
@@ -140,6 +140,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   height?: number;
@@ -248,6 +249,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;
diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts
index c4ebd392ea8..56abe0fd803 100644
--- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts
+++ b/packages/react-charts/src/components/ChartUtils/chart-legend.ts
@@ -5,6 +5,7 @@ import { ChartLegendOrientation, ChartLegendPosition, ChartLegendProps } from '.
 import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
 import { getPieOrigin } from './chart-origin';
 import * as React from 'react';
+import { PatternScaleInterface } from './chart-patterns';
 
 interface ChartLegendInterface {
   allowWrap?: boolean; // Allow legend items to wrap to the next line
@@ -16,7 +17,7 @@ interface ChartLegendInterface {
   legendComponent: React.ReactElement<any>; // The base legend component to render
   orientation?: 'horizontal' | 'vertical'; // Orientation of legend
   padding: PaddingProps; // Chart padding
-  patternScale?: string[]; // Legend symbol patterns
+  patternScale?: PatternScaleInterface[]; // Legend symbol patterns
   position: 'bottom' | 'bottom-left' | 'right'; // The legend position
   theme: ChartThemeDefinition; // The theme that will be applied to the chart
   width: number; // Overall width of SVG
diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx
index dccc97aaf46..722a42d1f25 100644
--- a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx
+++ b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx
@@ -1,14 +1,23 @@
 import * as React from 'react';
+import merge from 'lodash/merge';
 import uniqueId from 'lodash/uniqueId';
 
+// @beta
+export interface PatternScaleInterface {
+  value?: string; // This value is output as "fill" for component styles and as "stroke" for pattern defs
+  isVisible?: boolean;
+}
+
 // @beta
 interface PatternPropsInterface {
   children?: any;
   colorScale?: any;
+  isPatternDefs?: boolean;
   offset?: number;
   patternId?: string;
-  patternScale?: string[];
-  isPatternDefs?: boolean;
+  patternScale?: PatternScaleInterface[];
+  patternUnshiftIndex?: number;
+  themeColorScale?: string[];
 }
 
 /**
@@ -230,13 +239,27 @@ export const getPatternDefsId = (prefix: string, index: number) => {
  * Helper function to return pattern defs
  * @private
  */
-export const getPatternDefs = ({ offset = 0, patternId, patternScale }: PatternPropsInterface) => {
+export const getPatternDefs = ({
+  colorScale,
+  offset = 0,
+  patternId,
+  patternUnshiftIndex = 0
+}: PatternPropsInterface) => {
+  const defaultPatterns = [...patterns];
+
+  // Move the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold
+  if (patternUnshiftIndex > 0 && patternUnshiftIndex < defaultPatterns.length) {
+    defaultPatterns.unshift(defaultPatterns.splice(patternUnshiftIndex, 1)[0]);
+  }
+
   // This is wrapped in an empty tag so Victory does not apply child props to defs
   const defs = (
     <React.Fragment key={`defs`}>
       <defs>
-        {patternScale.map((c: string, index: number) => {
-          const { d, fill, stroke = c, strokeWidth, ...rest } = patterns[(index + offset) % patterns.length];
+        {colorScale.map((color: PatternScaleInterface, index: number) => {
+          const { d, fill, stroke = color.value, strokeWidth, ...rest } = defaultPatterns[
+            (index + offset) % defaultPatterns.length
+          ];
           const id = getPatternDefsId(patternId, index);
           return (
             <pattern id={id} key={id} {...rest}>
@@ -254,15 +277,41 @@ export const getPatternDefs = ({ offset = 0, patternId, patternScale }: PatternP
  * Helper function to return pattern IDs to use as color scale
  * @private
  */
-export const getPatternScale = (patternId: string, colorScale: string[]) =>
-  colorScale.map((c: any, index: number) => `url(#${getPatternDefsId(patternId, index)})`);
+export const getPatternScale = (colorScale: string[], patternId: string) =>
+  colorScale.map((val: any, index: number) => `url(#${getPatternDefsId(patternId, index)})`);
 
 /**
  * Helper function to return default color scale
  * @private
  */
-export const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) =>
-  colorScale ? colorScale : themeColorScale;
+export const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) => {
+  const result: PatternScaleInterface[] = [];
+  const colors = colorScale ? colorScale : themeColorScale;
+
+  colors.forEach(val =>
+    result.push({
+      value: val
+    })
+  );
+  return result;
+};
+
+/**
+ * Merge pattern IDs with `data.fill` property, used by interactive pie chart legend
+ * @private
+ */
+export const getDefaultData = (data: any, patternScale: PatternScaleInterface[]) => {
+  if (!patternScale) {
+    return data;
+  }
+  return data.map((datum: any, index: number) => {
+    const pattern = patternScale[index % patternScale.length];
+    return {
+      ...(pattern && pattern.isVisible !== false && { _fill: pattern.value }),
+      ...datum
+    };
+  });
+};
 
 /**
  * Helper function to return default pattern scale
@@ -270,41 +319,58 @@ export const getDefaultColorScale = (colorScale: string[], themeColorScale: stri
  */
 export const getDefaultPatternScale = ({
   colorScale,
-  patternScale,
+  isPatternDefs,
   patternId,
-  isPatternDefs
+  patternScale
 }: PatternPropsInterface) => {
-  if (patternScale) {
-    return patternScale;
-  }
+  const result: PatternScaleInterface[] = [];
+
   if (isPatternDefs) {
-    return getPatternScale(patternId, colorScale);
+    const defaultPatterns = getPatternScale(colorScale, patternId);
+    defaultPatterns.forEach(p =>
+      result.push({
+        value: p,
+        isVisible: true
+      })
+    );
+  }
+  if (patternScale) {
+    merge(result, patternScale);
   }
-  return undefined;
+  return result.length > 0 ? result : undefined;
 };
 
 /**
- * Merge pattern IDs with `data.fill` property, used by interactive pie chart legend
+ * Helper function to return default pattern props
  * @private
  */
-export const getDefaultData = (data: any, patternScale: string[]) => {
-  if (!patternScale) {
-    return data;
+export const getDefaultPatternProps = ({
+  colorScale,
+  isPatternDefs,
+  patternScale,
+  themeColorScale
+}: PatternPropsInterface) => {
+  const defaultColorScale = getDefaultColorScale(colorScale, themeColorScale);
+  let defaultPatternScale = patternScale;
+  let patternId;
+
+  if (isPatternDefs) {
+    patternId = React.useMemo(() => getPatternId(), []);
+    defaultPatternScale = getDefaultPatternScale({
+      colorScale: defaultColorScale,
+      isPatternDefs,
+      patternId,
+      patternScale
+    });
   }
-  return data.map((datum: any, index: number) => {
-    const pattern = patternScale[index % patternScale.length];
-    return {
-      ...(pattern && pattern !== null && { _fill: pattern }),
-      ...datum
-    };
-  });
+  return { defaultColorScale, defaultPatternScale, patternId };
 };
 
 /**
  * Helper function to render children with patterns
  * @private
  */
-export const renderChildrenWithPatterns = ({ children, patternId, patternScale }: PatternPropsInterface) =>
+export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPropsInterface) =>
   React.Children.toArray(children).map((child, index) => {
     if (React.isValidElement(child)) {
       const { ...childProps } = child.props;
@@ -312,14 +378,13 @@ export const renderChildrenWithPatterns = ({ children, patternId, patternScale }
 
       // Merge pattern IDs with `style.data.fill` property
       if (patternScale) {
-        const fill = patternScale[index % patternScale.length];
+        const pattern = patternScale[index % patternScale.length];
         style.data = {
-          ...(fill && fill !== null && { fill }),
+          ...(pattern && pattern.isVisible !== false && { fill: pattern.value }),
           ...style.data
         };
       }
       const _child = React.cloneElement(child, {
-        patternId,
         ...(patternScale && { patternScale }),
         ...childProps,
         style // Override child props
diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts
index 08974b84e02..3a5b35d5f4a 100644
--- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts
+++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts
@@ -4,6 +4,7 @@ import { Helpers, OrientationTypes, StringOrNumberOrCallback } from 'victory-cor
 import { ChartLegendProps } from '../ChartLegend';
 import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme';
 import { getLegendDimensions } from './chart-legend';
+import { PatternScaleInterface } from './chart-patterns';
 
 interface ChartCursorTooltipCenterOffsetInterface {
   offsetCursorDimensionX?: boolean; // Adjust the tooltip to appear to the right of the vertical cursor
@@ -28,7 +29,7 @@ interface ChartLegendTooltipVisibleDataInterface {
   activePoints?: any[];
   colorScale?: string[];
   legendData: any;
-  patternScale?: string[]; // Legend symbol patterns
+  patternScale?: PatternScaleInterface[]; // Legend symbol patterns
   text?: StringOrNumberOrCallback | string[] | number[];
   textAsLegendData?: boolean;
   theme: ChartThemeDefinition;
@@ -243,7 +244,7 @@ export const getLegendTooltipVisibleData = ({
         result.push({
           name: textAsLegendData ? _text[index] : data.name,
           symbol: {
-            fill: pattern && pattern !== null ? pattern : color,
+            fill: pattern && pattern.isVisible !== false ? pattern.value : color,
             ...data.symbol
           }
         });
diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx
index b0085962d90..aac3749b2fb 100644
--- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx
+++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx
@@ -37,6 +37,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   children?: React.ReactElement | React.ReactElement[];
@@ -137,6 +138,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
diff --git a/packages/react-charts/src/components/Patterns/examples/patterms.md b/packages/react-charts/src/components/Patterns/examples/patterms.md
index c47b3953abb..b9baab66a38 100644
--- a/packages/react-charts/src/components/Patterns/examples/patterms.md
+++ b/packages/react-charts/src/components/Patterns/examples/patterms.md
@@ -15,7 +15,6 @@ propComponents: [
   'ChartPie',
   'ChartScatter',
   'ChartStack',
-  'ChartThemeColor',
   'ChartVoronoiContainer',
 ]
 hideDarkMode: true
@@ -124,7 +123,7 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiCo
 ### Stack chart
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 <div style={{ height: '250px', width: '600px' }}>
   <Chart
@@ -161,7 +160,7 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@
 ### Donut chart
 ```js
 import React from 'react';
-import { ChartDonut } from '@patternfly/react-charts';
+import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '230px', width: '350px' }}>
   <ChartDonut
@@ -190,11 +189,11 @@ import { ChartDonut } from '@patternfly/react-charts';
 
 ### Donut utilization chart
 
-This demonstrates how to apply a pattern to the static, unused portion of the donut utilization chart.
+This demonstrates how to hide a pattern for the static, unused portion of the donut utilization chart.
 
 ```js
 import React from 'react';
-import { ChartDonutUtilization } from '@patternfly/react-charts';
+import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '275px', width: '300px' }}>
   <ChartDonutUtilization 
@@ -212,7 +211,10 @@ import { ChartDonutUtilization } from '@patternfly/react-charts';
       right: 20,
       top: 20
     }}
-    showStaticPattern
+    patternScale={[
+      { isVisible: true },
+      { isVisible: false }
+    ]}
     subTitle="of 100 GBps"
     title="45%"
     themeColor={ChartThemeColor.green}
@@ -229,7 +231,7 @@ This demonstrates how to apply patterns to thresholds.
 
 ```js
 import React from 'react';
-import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '275px', width: '675px' }}>
   <ChartDonutThreshold
@@ -256,7 +258,6 @@ import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-ch
       subTitle="of 100 GBps"
       title="45%"
       themeColor={ChartThemeColor.orange}
-      isPatternDefs
     />
   </ChartDonutThreshold>
 </div>
@@ -337,11 +338,6 @@ class InteractivePieLegendChart extends React.Component {
       const { hiddenSeries } = this.state; // Skip if already hidden                
       return hiddenSeries.has(index);
     };
-
-    this.isDataAvailable = () => {
-      const { hiddenSeries } = this.state;
-      return hiddenSeries.size !== this.series.length;
-    };
   };
 
   render() {
@@ -349,9 +345,9 @@ class InteractivePieLegendChart extends React.Component {
 
     const data = [];
     this.series.map((s, index) => {
-      data.push(!hiddenSeries.has(index) ? s.datapoints : [{ y: null}]);
+      data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });
     });
-
+    
     return (
       <div style={{ height: '275px', width: '500px' }}>
         <Chart
@@ -359,7 +355,6 @@ class InteractivePieLegendChart extends React.Component {
           ariaTitle="Pie chart example"
           events={this.getEvents()}
           height={275}
-          labels={({ datum }) => `${datum.x}: ${datum.y}`}
           legendComponent={<ChartLegend name={'legend'} data={this.getLegendData()} />}
           legendPosition="bottom"
           padding={{
@@ -368,7 +363,6 @@ class InteractivePieLegendChart extends React.Component {
             right: 20,
             top: 20
           }}
-          patternId="pattern_a" // Required for interactive legend functionality
           showAxis={false}
           themeColor={ChartThemeColor.multiUnordered}
           isPatternDefs
@@ -377,6 +371,7 @@ class InteractivePieLegendChart extends React.Component {
           <ChartPie
             constrainToVisibleArea={true}
             data={data}
+            labels={({ datum }) => `${datum.x}: ${datum.y}`}
             name="pie"
           />
         </Chart>
@@ -685,8 +680,13 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
       right: 140, // Adjusted to accommodate legend
       top: 20
     }}
-    patternId="pattern_b"
-    patternScale={['url("#pattern_b:0")', 'url("#pattern_b:1")', null, null, null]}
+    patternScale={[
+      { isVisible: true },
+      { isVisible: true },
+      { isVisible: false },
+      { isVisible: false },
+      { isVisible: false }
+    ]}
     themeColor={ChartThemeColor.multiUnordered}
     isPatternDefs
     width={350}
@@ -702,7 +702,7 @@ The approach uses `isPatternDefs` to generate default pattern defs using the giv
 
 ```js
 import React from 'react';
-import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
+import { ChartPie } from '@patternfly/react-charts';
 import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
 import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
 import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
@@ -711,7 +711,7 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color
   <ChartPie
     ariaDesc="Average number of pets"
     ariaTitle="Pie chart example"
-    colorScale={[chart_color_blue_300.value, chart_color_gold_300.var, chart_color_green_300.value]}
+    colorScale={[chart_color_blue_300.var, chart_color_gold_300.var, chart_color_green_300.var]}
     constrainToVisibleArea={true}
     data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
     height={230}
@@ -725,8 +725,11 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color
       right: 140, // Adjusted to accommodate legend
       top: 20
     }}
-    patternId="pattern_c"
-    patternScale={['url("#pattern_c:0")', 'url("#pattern_c:1")', null]}
+    patternScale={[
+      { isVisible: true },
+      { isVisible: true },
+      { isVisible: false }
+    ]}
     isPatternDefs
     width={350}
   />
@@ -750,10 +753,10 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color
 <div style={{ height: '230px', width: '350px' }}>
   <svg aria-hidden={true} height="0" width="0" style={{display: 'block'}}>
     <defs>
-      <pattern id="pattern_d:0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
+      <pattern id="pattern:0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
         <path d="M 0 0 L 5 10 L 10 0" stroke={chart_color_blue_300.value} strokeWidth="2" fill="none"></path>
       </pattern>
-      <pattern id="pattern_d:1" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
+      <pattern id="pattern:1" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
         <path d="M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7" stroke={chart_color_green_300.value} strokeWidth="2" fill="none"></path>
       </pattern>
     </defs>
@@ -774,7 +777,11 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color
       right: 140, // Adjusted to accommodate legend
       top: 20
     }}
-    patternScale={['url("#pattern_d:0")', 'url("#pattern_d:1")', null]}
+    patternScale={[
+      { isVisible: true, value: 'url("#pattern:0")' },
+      { isVisible: true, value: 'url("#pattern:1")' },
+      { isVisible: false }
+    ]}
     themeColor={ChartThemeColor.multiUnordered}
     width={350}
   />