Skip to content

fix(charts): scale native Victory charts from measured bubble width #95250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
roryabraham wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(charts): scale native Victory charts from measured bubble width #95250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d20dde
fix(charts): scale native Victory charts from measured bubble width
roryabraham Jul 3, 2026
16cdd12
test(charts): ensure native Victory chart container stays responsive
roryabraham Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 1 addition & 56 deletions ...ider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1 @@
import React from 'react';
import {View} from 'react-native';
import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
import computeChartScale from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/computeChartScale';
import {resolveChartContainerBgColor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';

// Horizontal space consumed by chat message padding, avatar, and margins (excluding safe area insets).
// Used instead of onLayout because Yoga inflates the container width to match the fixed-width chart child.
const CHAT_MESSAGE_HORIZONTAL_PADDING = 92;

/** @see POLAR_CONTAINER_HEIGHT_RATIO in VictoryChartContainerFixed */
const POLAR_CONTAINER_HEIGHT_RATIO = 0.9;

function VictoryChartContainer({children}: {children: React.ReactNode}) {
const styles = useThemeStyles();
const theme = useTheme();
const {chartContentStyles, chartContainerStyles, type} = useVictoryChartContext();
const {windowWidth} = useWindowDimensions();
const {left: safeAreaLeft, right: safeAreaRight} = useSafeAreaInsets();

const designWidth = typeof chartContentStyles.width === 'number' ? chartContentStyles.width : undefined;
const designHeight = typeof chartContentStyles.height === 'number' ? chartContentStyles.height : undefined;
const hasExplicitDimensions = designWidth !== undefined && designHeight !== undefined;
const isPolar = type === CHART_TYPE.POLAR;
const effectiveDesignHeight = isPolar && designHeight ? designHeight * POLAR_CONTAINER_HEIGHT_RATIO : designHeight;

const availableWidth = windowWidth - safeAreaLeft - safeAreaRight - CHAT_MESSAGE_HORIZONTAL_PADDING;
const scale = hasExplicitDimensions ? computeChartScale(designWidth, availableWidth) : 1;

const {backgroundColor: rawBgColor, borderRadius, ...layoutContainerStyles} = chartContainerStyles;
const backgroundColor = resolveChartContainerBgColor(rawBgColor, theme);

const contentStyle = hasExplicitDimensions
? [chartContentStyles, {backgroundColor, borderRadius, overflow: 'hidden' as const, transform: [{scale}], transformOrigin: 'top left' as const}]
: [styles.chartContent, chartContentStyles, {backgroundColor, borderRadius, overflow: 'hidden' as const}];

const containerStyle =
hasExplicitDimensions && effectiveDesignHeight && designWidth
? [{width: designWidth * scale, height: effectiveDesignHeight * scale, alignSelf: 'flex-start' as const, overflow: 'hidden' as const, borderRadius}]
: [styles.chartContainer, styles.mw100, layoutContainerStyles];

return (
<View style={containerStyle}>
<View style={contentStyle}>{children}</View>
</View>
);
}

VictoryChartContainer.displayName = 'VictoryChartContainer';

export default VictoryChartContainer;
export {default} from './VictoryChartContainerResponsive';

Check failure on line 1 in src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'default' is restricted from being used as an exported name

Check failure on line 1 in src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'default' is restricted from being used as an exported name
8 changes: 8 additions & 0 deletions tests/unit/VictoryChartContainerNativeTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import VictoryChartContainerNative from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native';
import VictoryChartContainerResponsive from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/VictoryChartContainerResponsive';

describe('VictoryChartContainer native', () => {
it('uses the responsive container so charts scale from measured chat bubble width', () => {
expect(VictoryChartContainerNative).toBe(VictoryChartContainerResponsive);
});
});
Loading