# packages/core/src/features/viz/lib/bar-scale.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/viz/lib/bar-scale.ts#L11). [Back to reference](/reference/components/scale/)

1 import { resolveSignalValue, useComputed, useLayoutBox } from "@pibbl/core";
2 import type { BarScaleProps, ScaleRange } from "./types.js";
3 import { resolveBandScale } from "./band-scale.js";
4 import { captureScaleLookup } from "./scale-context.js";
5 import { useScaleProvider } from "./scale-provider.js";
6 /**
7  * Provides categorical bands, including nested groups sized to a parent band.
8  * @param props - Categories, spacing, range, and children. See {@link BarScaleProps}.
9  * @returns Descendant content within the scale scope.
10  */
11 export function BarScale(props: BarScaleProps) {
12   const { width, height } = useLayoutBox();
13   const lookup = captureScaleLookup("BarScale bandwidthOf");
14   function resolveParent() {
15     const range = resolveSignalValue(props.range);
16     if (typeof range !== "object" || range === null || !("bandwidthOf" in range)) return undefined;
17     const parent = lookup(range.bandwidthOf)?.get();
18     if (!parent || parent.type !== "band") throw new TypeError("BarScale bandwidthOf requires an ancestor band scale.");
19     return parent;
20   }
21   const parent = useComputed(resolveParent, [props.range, lookup]).get();
22   useScaleProvider(props.id, "band", () => {
23     const currentParent = resolveParent();
24     const range: ScaleRange = currentParent ? [0, currentParent.bandwidth] : resolveSignalValue(props.range) as ScaleRange;
25     return resolveBandScale(resolveSignalValue(props.domain), range,
26       resolveSignalValue(props.reverse ?? false), width, height,
27       resolveSignalValue(props.paddingInner ?? 0), resolveSignalValue(props.paddingOuter ?? 0));
28   }, [parent, props.domain, props.range, props.reverse, props.paddingInner, props.paddingOuter, width, height]);
29   return props.children;
30 }
31

## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.