Skip to content

[NoQA] [Insights] Add horizontal bar chart variant for wide layouts #101435

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
adamgrzybowski wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[NoQA] [Insights] Add horizontal bar chart variant for wide layouts #101435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7fcae58
Add horizontal bar chart variant for wide layouts
adamgrzybowski Sep 17, 2026
234788d
Reduce horizontal bar chart tooltip tip gap
adamgrzybowski Sep 17, 2026
b8bee3e
Add rrect to cspell dictionary
adamgrzybowski Sep 17, 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
1 change: 1 addition & 0 deletions cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -950,6 +950,7 @@
"resultsbox",
"retryable",
"rideshare",
"rrect",
"Rightworks",
"RNCORE",
"RNFS",
Expand Down
22 changes: 13 additions & 9 deletions src/components/Charts/BarChart/BarChartContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import {Bar, CartesianChart} from 'victory-native';

import type {CartesianChartProps, ChartDataPoint} from '..';

import HorizontalBarChartContentBody from './HorizontalBarChartContent';

/** Extra pixel spacing between the chart boundary and the data range, applied per side (Victory's `domainPadding` prop)
* We need bottom: 1 for proper display of the bottom label
*/
Expand All @@ -43,9 +45,15 @@ type BarChartProps = CartesianChartProps & {

/** When true, all bars use the same color. When false (default), each bar uses a different color from the palette. */
useSingleColor?: boolean;

/** When true, renders horizontal bars (value on the x-axis) instead of the default vertical bars. */
isHorizontal?: boolean;
};

function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left', useSingleColor = false, onBarPress}: BarChartProps) {
/** Props for an orientation-specific body. Orientation is resolved by the wrapper, so the bodies never receive `isHorizontal`. */
type BarChartBodyProps = Omit<BarChartProps, 'isHorizontal'>;

function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left', useSingleColor = false, onBarPress}: BarChartBodyProps) {
const theme = useTheme();
const styles = useThemeStyles();
const fontManager = useChartFontManager();
Expand Down Expand Up @@ -171,7 +179,7 @@ function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'l
}));

const renderBar = (point: PointsArray[number], chartBounds: ChartBounds, barCount: number) => {
const dataIndex = point.xValue as number;
const dataIndex = Number(point.xValue);
const dataPoint = data.at(dataIndex);
const barColor = useSingleColor ? defaultBarColor : VictoryTheme.colors.getColor(dataIndex);

Expand Down Expand Up @@ -291,13 +299,9 @@ function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'l
);
}

function BarChartContent(props: BarChartProps) {
return (
<ChartFontsProvider>
<BarChartContentBody {...props} />
</ChartFontsProvider>
);
function BarChartContent({isHorizontal = false, ...props}: BarChartProps) {
return <ChartFontsProvider>{isHorizontal ? <HorizontalBarChartContentBody {...props} /> : <BarChartContentBody {...props} />}</ChartFontsProvider>;
}

export default BarChartContent;
export type {BarChartProps};
export type {BarChartProps, BarChartBodyProps};
Loading
Loading