diff --git a/.changeset/soft-moons-exist.md b/.changeset/soft-moons-exist.md
new file mode 100644
index 000000000..30c54a491
--- /dev/null
+++ b/.changeset/soft-moons-exist.md
@@ -0,0 +1,6 @@
+---
+"victory-bar": patch
+"victory-core": patch
+---
+
+Zoomed bar graph items will no longer be culled from the view when more than 50% of width or height is outside of the clipping parent. Instead they will be clipped once 100% outside"
diff --git a/demo/ts/components/victory-zoom-container-demo.tsx b/demo/ts/components/victory-zoom-container-demo.tsx
index 71328bd0c..d6172a62f 100644
--- a/demo/ts/components/victory-zoom-container-demo.tsx
+++ b/demo/ts/components/victory-zoom-container-demo.tsx
@@ -550,6 +550,21 @@ export default class VictoryZoomContainerDemo extends React.Component<
+
+ }
+ style={{ parent: parentStyle }}
+ >
+
+
+
+ }
+ style={{ parent: parentStyle }}
+ horizontal
+ >
+
+
);
}
diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts
index 4604383ee..0a5fe93bb 100644
--- a/packages/victory-bar/src/helper-methods.ts
+++ b/packages/victory-bar/src/helper-methods.ts
@@ -5,6 +5,7 @@ import {
Helpers,
LabelHelpers,
Scale,
+ VictoryClipContainer,
} from "victory-core";
export const getBarPosition = (props, datum) => {
@@ -61,6 +62,12 @@ 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, _y: datum.y }));
+ }
+
return { style, data, scale, domain, origin };
};
diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx
index 11723bce3..5841568ed 100644
--- a/packages/victory-bar/src/victory-bar.tsx
+++ b/packages/victory-bar/src/victory-bar.tsx
@@ -13,6 +13,7 @@ import {
EventPropTypeInterface,
NumberOrCallback,
StringOrNumberOrCallback,
+ VictoryClipContainer,
VictoryCommonProps,
VictoryDatableProps,
VictoryMultiLabelableProps,
@@ -127,7 +128,9 @@ class VictoryBarBase extends React.Component {
"groupComponent",
"containerComponent",
];
-
+ // passed to addEvents.renderData to prevent data props with undefined _x or _y from excluding data from render.
+ // used when inside of VictoryZoomContainer
+ static shouldRenderDatum = () => true;
// Overridden in native versions
shouldAnimate() {
return !!this.props.animate;
@@ -141,7 +144,15 @@ class VictoryBarBase extends React.Component {
return this.animateComponent(props, animationWhitelist);
}
- const children = this.renderData(props);
+ 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 {
+ children = this.renderData(props);
+ }
const component = props.standalone
? this.renderContainer(props.containerComponent, children)
diff --git a/packages/victory-core/src/victory-util/add-events.tsx b/packages/victory-core/src/victory-util/add-events.tsx
index e1a5c1e3d..13033a027 100644
--- a/packages/victory-core/src/victory-util/add-events.tsx
+++ b/packages/victory-core/src/victory-util/add-events.tsx
@@ -57,7 +57,7 @@ export interface EventsMixinClass {
): React.ReactElement;
cacheValues(this: TThis, obj: Partial): void;
getEventState: typeof Events.getEventState;
- renderData(props: TProps);
+ renderData(props: TProps, shouldRenderDatum?: () => boolean);
renderContinuousData(props: TProps);
animateComponent(
props: TProps,