Skip to main content

useBarGroupPaths

The useBarGroupPaths hook takes an array of PointsArray, a ChartBounds object, and some padding options, and returns a list of SkPath paths and some details about the spacing of the bars.

Example​

import {
  CartesianChart,
  useBarGroupPaths,
  type PointsArray,
  type ChartBounds,
} from "victory-native";
import { Path } from "@shopify/react-native-skia";
import DATA from "./my-data";

function MyCustomBarGroup({
  points,
  chartBounds,
  innerPadding,
}: {
  points: PointsArray[];
  chartBounds: ChartBounds;
}) {
  // 👇 use the hook to generate path objects.
  const { paths } = useBarGroupPaths(points, chartBounds);

  return paths.map((path) => <Path path={path} style="fill" color="red" />);
}

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y", "z"]}>
      {({ points }) => <MyCustomBarGroup points={[points.y, points.z]} />}
    </CartesianChart>
  );
}

Arguments​

useBarGroupPaths has a function signature as follows:

useBarGroupPaths(
  points: PointsArray[],
  chartBounds: ChartBounds,
  betweenGroupPadding?: number,
  withinGroupPadding?: number,
  roundedCorners?: RoundedCorners,
  barWidth?: number,
  barCount?: number,
): { paths: SkPath[]; barWidth: number; groupWidth: number; gapWidth: number; }

points​

The points argument is an array of PointsArray arrays used to generate the bars' paths. Generally, these arrays comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above.

chartBounds​

A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart.

betweenGroupPadding​

An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bar groups should be "white space". Defaults to 0.2. Use 0 for no gap between groups, and values closer to 1 to make bars increasingly narrow.

withinGroupPadding​

An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars within a group should be "white space". Defaults to 0.2. Use 0 for no gap between bars within a group, and values closer to 1 to make bars increasingly narrow.

roundedCorners​

An optional RoundedCorners object for generating rounded grouped bar paths. Corner radii are capped to half of the rendered bar width.

barWidth​

An optional explicit bar width for each bar within the group. This takes precedence over barCount and the computed width. Explicit 0 is respected.

barCount​

An optional count used to compute group width as if there were barCount x data points. This is useful for keeping grouped bar widths stable when rendering dynamic subsets of a larger dataset.

Returns​

useBarGroupPaths returns an object with the following fields.

paths​

An array of SkPath path objects to be used as the path argument of a Skia <Path /> element.

barWidth​

A number representing the width of each bar.

groupWidth​

A number representing the width of each bar group.

gapWidth​

A number representing the gap size between each bar in a group.