added some comments, returned a new data obect instead of mutating, and added a horizontal demo

Author: nstolpe

demo/ts/components/victory-zoom-container-demo.tsx

@@ -557,6 +557,14 @@ export default class VictoryZoomContainerDemo extends React.Component<
         >
           <VictoryBar />
         </VictoryChart>
+
+        <VictoryChart
+          containerComponent={<VictoryZoomContainer />}
+          style={{ parent: parentStyle }}
+          horizontal
+        >
+          <VictoryBar />
+        </VictoryChart>
       </div>
     );
   }

packages/victory-bar/src/helper-methods.ts

@@ -62,12 +62,10 @@ const getCalculatedValues = (props) => {
   let data = Data.getData(props);
   data = Data.formatDataFromDomain(data, domain, 0);
 
+  // when inside a zoom container, reset the _x and _y properties of each datum to the original
+  // x and y property values so they will not be clipped. See https://github.com/FormidableLabs/victory/pull/2970
   if (props.groupComponent.type === VictoryClipContainer) {
-    data = data.map((datum) => {
-      datum._x = datum.x;
-      datum._y = datum.y;
-      return datum;
-    });
+    data = data.map((datum) => ({ ...datum, _x: datum.x, _y: datum.y }));
   }
 
   return { style, data, scale, domain, origin };

packages/victory-bar/src/victory-bar.tsx

@@ -39,8 +39,8 @@ export type VictoryBarAlignmentType = "start" | "middle" | "end";
 
 export interface VictoryBarProps
   extends VictoryCommonProps,
-    VictoryDatableProps,
-    VictoryMultiLabelableProps {
+  VictoryDatableProps,
+  VictoryMultiLabelableProps {
   alignment?: VictoryBarAlignmentType;
   barRatio?: number;
   barWidth?: NumberOrCallback;
@@ -145,6 +145,9 @@ class VictoryBarBase extends React.Component<VictoryBarProps> {
     }
 
     let children;
+    // when inside a zoom container (the only place VictoryClipContainer is used), all data
+    // should be renderable so bars won't dissappear before they've fully exited the container's bounds
+    // see https://github.com/FormidableLabs/victory/pull/2970
     if (props.groupComponent.type === VictoryClipContainer) {
       children = this.renderData(props, VictoryBarBase.shouldRenderDatum);
     } else {