solid-recharts 0.1.0

package/src/util/RadialBarUtils.tsx

@@ -0,0 +1,35 @@
+// Ported from recharts 3.8.1 src/util/RadialBarUtils.tsx (commit 7a23854).
+// Renders a RadialBar sector through the <Shape> abstraction (default = Sector).
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { RadialBarDataItem, RadialBarProps } from "../polar/RadialBar";
+import { Sector } from "../shape/Sector";
+import { Shape } from "./ActiveShapeUtils";
+
+export const defaultRadialBarShape = Sector;
+
+export function parseCornerRadius(cornerRadius: string | number | undefined): number | undefined {
+  if (typeof cornerRadius === "string") {
+    return parseInt(cornerRadius, 10);
+  }
+  return cornerRadius;
+}
+
+export interface RadialBarSectorProps extends RadialBarDataItem {
+  index: number;
+  isActive: boolean;
+}
+
+type RadialBarSectorComponentProps = RadialBarSectorProps & {
+  option: Exclude<RadialBarProps["shape"], undefined> | RadialBarProps["activeShape"];
+};
+
+export function RadialBarSector(props: RadialBarSectorComponentProps): JSX.Element {
+  return (
+    <Shape<RadialBarSectorProps, SVGPathElement>
+      option={props.option}
+      DefaultShape={defaultRadialBarShape}
+      shapeProps={omit(props, "option")}
+    />
+  );
+}

package/src/util/ReduceCSSCalc.ts

@@ -0,0 +1,186 @@
+// Ported from recharts 3.8.1 src/util/ReduceCSSCalc.ts (commit 7a23854).
+// Pure CSS-calc parser — no framework surface — so behavior is byte-identical to recharts.
+
+import { isNan } from "./DataUtils";
+
+const MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([*/])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+const ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([+-])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+const CSS_LENGTH_UNIT_REGEX = /^(px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q)$/;
+const NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-zA-Z%]+)?/;
+
+type SupportedUnits = "cm" | "mm" | "pt" | "pc" | "in" | "Q" | "px";
+
+const CONVERSION_RATES: Record<SupportedUnits, number> = {
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  pt: 96 / 72,
+  pc: 96 / 6,
+  in: 96,
+  Q: 96 / (2.54 * 40),
+  px: 1,
+};
+
+const FIXED_CSS_LENGTH_UNITS: ReadonlyArray<SupportedUnits> = [
+  "cm",
+  "mm",
+  "pt",
+  "pc",
+  "in",
+  "Q",
+  "px",
+];
+
+function isSupportedUnit(unit: string): unit is SupportedUnits {
+  return FIXED_CSS_LENGTH_UNITS.some((supported) => supported === unit);
+}
+
+const STR_NAN = "NaN";
+
+function convertToPx(value: number, unit: SupportedUnits): number {
+  return value * CONVERSION_RATES[unit];
+}
+
+class DecimalCSS {
+  static parse(str: string) {
+    const [, numStr, unit] = NUM_SPLIT_REGEX.exec(str) ?? [];
+
+    if (numStr == null) {
+      return DecimalCSS.NaN;
+    }
+
+    return new DecimalCSS(parseFloat(numStr), unit ?? "");
+  }
+
+  static NaN = new DecimalCSS(NaN, "");
+
+  constructor(
+    public num: number,
+    public unit: string,
+  ) {
+    // `num`/`unit` are parameter properties (auto-assigned); no explicit assignment needed.
+    if (isNan(num)) {
+      this.unit = "";
+    }
+
+    if (unit !== "" && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+      this.num = NaN;
+      this.unit = "";
+    }
+
+    if (isSupportedUnit(unit)) {
+      this.num = convertToPx(num, unit);
+      this.unit = "px";
+    }
+  }
+
+  add(other: DecimalCSS) {
+    if (this.unit !== other.unit) {
+      return new DecimalCSS(NaN, "");
+    }
+
+    return new DecimalCSS(this.num + other.num, this.unit);
+  }
+
+  subtract(other: DecimalCSS) {
+    if (this.unit !== other.unit) {
+      return new DecimalCSS(NaN, "");
+    }
+
+    return new DecimalCSS(this.num - other.num, this.unit);
+  }
+
+  multiply(other: DecimalCSS) {
+    if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) {
+      return new DecimalCSS(NaN, "");
+    }
+
+    return new DecimalCSS(this.num * other.num, this.unit || other.unit);
+  }
+
+  divide(other: DecimalCSS) {
+    if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) {
+      return new DecimalCSS(NaN, "");
+    }
+
+    return new DecimalCSS(this.num / other.num, this.unit || other.unit);
+  }
+
+  toString() {
+    return `${this.num}${this.unit}`;
+  }
+
+  isNaN() {
+    return isNan(this.num);
+  }
+}
+
+function calculateArithmetic(expr: string | undefined): string {
+  if (expr == null || expr.includes(STR_NAN)) {
+    return STR_NAN;
+  }
+
+  let newExpr = expr;
+  while (newExpr.includes("*") || newExpr.includes("/")) {
+    const [, leftOperand, operator, rightOperand] = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr) ?? [];
+    const lTs = DecimalCSS.parse(leftOperand ?? "");
+    const rTs = DecimalCSS.parse(rightOperand ?? "");
+    const result = operator === "*" ? lTs.multiply(rTs) : lTs.divide(rTs);
+    if (result.isNaN()) {
+      return STR_NAN;
+    }
+    newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, result.toString());
+  }
+
+  while (newExpr.includes("+") || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+    const [, leftOperand, operator, rightOperand] = ADD_OR_SUBTRACT_REGEX.exec(newExpr) ?? [];
+    const lTs = DecimalCSS.parse(leftOperand ?? "");
+    const rTs = DecimalCSS.parse(rightOperand ?? "");
+    const result = operator === "+" ? lTs.add(rTs) : lTs.subtract(rTs);
+    if (result.isNaN()) {
+      return STR_NAN;
+    }
+    newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, result.toString());
+  }
+
+  return newExpr;
+}
+
+const PARENTHESES_REGEX = /\(([^()]*)\)/;
+
+function calculateParentheses(expr: string): string {
+  let newExpr = expr;
+  let match: ReturnType<typeof RegExp.prototype.exec> | null;
+  // eslint-disable-next-line no-cond-assign
+  while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+    const [, parentheticalExpression] = match;
+    newExpr = newExpr.replace(PARENTHESES_REGEX, calculateArithmetic(parentheticalExpression));
+  }
+
+  return newExpr;
+}
+
+function evaluateExpression(expression: string): string {
+  let newExpr = expression.replace(/\s+/g, "");
+  newExpr = calculateParentheses(newExpr);
+  newExpr = calculateArithmetic(newExpr);
+
+  return newExpr;
+}
+
+export function safeEvaluateExpression(expression: string): string {
+  try {
+    return evaluateExpression(expression);
+  } catch {
+    return STR_NAN;
+  }
+}
+
+export function reduceCSSCalc(expression: string): string {
+  const result = safeEvaluateExpression(expression.slice(5, -1));
+
+  if (result === STR_NAN) {
+    return "";
+  }
+
+  return result;
+}

package/src/util/ShallowEqual.ts

@@ -0,0 +1,43 @@
+// Reimplements react-redux's `shallowEqual` (react-redux/src/utils/shallowEqual.ts).
+// The reference test imports `shallowEqual` from 'react-redux'; this project has no
+// react-redux, so we provide a local equivalent: Object.is reference/NaN handling,
+// then own-enumerable-key comparison in both directions with Object.is per key.
+
+function is(x: unknown, y: unknown): boolean {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  }
+  return x !== x && y !== y;
+}
+
+export function shallowEqual(objA: unknown, objB: unknown): boolean {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i];
+    if (key === undefined) {
+      continue;
+    }
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, key) ||
+      !is(Reflect.get(objA, key), Reflect.get(objB, key))
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/util/TickUtils.ts

@@ -0,0 +1,61 @@
+// Ported from recharts 3.8.1 src/util/TickUtils.ts.
+// Pure geometry — no framework surface — so behavior is byte-identical to recharts.
+import { getAngledRectangleWidth } from "./CartesianUtils";
+import { getEveryNth } from "./getEveryNth";
+import { Size, CartesianTickItem, CartesianViewBoxRequired } from "./types";
+
+export function getAngledTickWidth(contentSize: Size, unitSize: Size, angle: number | undefined) {
+  const size = {
+    width: contentSize.width + unitSize.width,
+    height: contentSize.height + unitSize.height,
+  };
+
+  return getAngledRectangleWidth(size, angle);
+}
+
+export function getTickBoundaries(
+  viewBox: CartesianViewBoxRequired,
+  sign: number,
+  sizeKey: string,
+) {
+  const isWidth = sizeKey === "width";
+  const { x, y, width, height } = viewBox;
+  if (sign === 1) {
+    return {
+      start: isWidth ? x : y,
+      end: isWidth ? x + width : y + height,
+    };
+  }
+  return {
+    start: isWidth ? x + width : y + height,
+    end: isWidth ? x : y,
+  };
+}
+
+export function isVisible(
+  sign: number,
+  tickPosition: number,
+  getSize: () => number,
+  start: number,
+  end: number,
+): boolean {
+  /* Since getSize() is expensive (it reads the ticks' size from the DOM), we do this check first to avoid calculating
+   * the tick's size. */
+  if (sign * tickPosition < sign * start || sign * tickPosition > sign * end) {
+    return false;
+  }
+
+  const size = getSize();
+
+  return (
+    sign * (tickPosition - (sign * size) / 2 - start) >= 0 &&
+    sign * (tickPosition + (sign * size) / 2 - end) <= 0
+  );
+}
+
+export function getNumberIntervalTicks(
+  ticks: ReadonlyArray<CartesianTickItem>,
+  interval: number,
+): ReadonlyArray<CartesianTickItem> | undefined {
+  return getEveryNth(ticks, interval + 1);
+}

package/src/util/YAxisUtils.ts

@@ -0,0 +1,49 @@
+// Ported from recharts 3.8.1 src/util/YAxisUtils.ts (commit 7a23854).
+type IGetBoundingClient = Pick<Element, "getBoundingClientRect">;
+
+/**
+ * Calculates the width of the Y-axis based on the tick labels and the axis label.
+ * @param params.ticks an array-like of tick elements, each with `getBoundingClientRect`
+ * @param params.label the axis label element, with `getBoundingClientRect`
+ * @param params.labelGapWithTick gap between the label and the tick (default 5)
+ * @param params.tickSize length of the tick line (default 0)
+ * @param params.tickMargin margin between the tick line and the tick text (default 0)
+ * @returns the calculated width of the Y-axis
+ */
+export const getCalculatedYAxisWidth = ({
+  ticks,
+  label,
+  labelGapWithTick = 5,
+  tickSize = 0,
+  tickMargin = 0,
+}: {
+  ticks: ArrayLike<IGetBoundingClient> | null;
+  label: IGetBoundingClient | null | undefined;
+  labelGapWithTick: number | undefined;
+  tickSize: number | undefined;
+  tickMargin: number | undefined;
+}): number => {
+  let maxTickWidth = 0;
+  if (ticks) {
+    Array.from(ticks).forEach((tickNode: IGetBoundingClient) => {
+      if (tickNode) {
+        const bbox = tickNode.getBoundingClientRect();
+
+        if (bbox.width > maxTickWidth) {
+          maxTickWidth = bbox.width;
+        }
+      }
+    });
+
+    const labelWidth = label ? label.getBoundingClientRect().width : 0;
+
+    const tickWidth = tickSize + tickMargin;
+
+    const updatedYAxisWidth =
+      maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+
+    return Math.round(updatedYAxisWidth);
+  }
+
+  return 0;
+};

package/src/util/adaptEventHandlers.ts

@@ -0,0 +1,69 @@
+// Ported from recharts 3.8.1 src/util/types.ts `adaptEventHandlers` (commit 7a23854).
+//
+// recharts wraps each event handler found on a props object so it is invoked with
+// `(props, event)` — the props object first, then the DOM event. Components like
+// Curve spread `adaptEventHandlers(props)` onto their root element so a user's
+// `<Line onClick={fn} />` ends up calling `fn(curveProps, event)`.
+//
+// DEVIATION from recharts: recharts also accepts a React element (via
+// `isValidElement` + `element.props`). Solid has no element-props introspection
+// (a rendered element is a DOM node, not a `{ props }` structure), so the element
+// branch is deferred — mirroring `svgPropertiesAndEventsFromUnknown`, this accepts
+// `unknown` and guards internally. Non-object inputs (function/boolean/null/array)
+// return `null`, exactly as recharts.
+import { isEventKey } from "./excludeEventProps";
+
+type EventHandler = (e: Event) => void;
+type RechartsEventHandler = (props: Record<string, unknown>, e: Event) => void;
+
+/** Type guard giving an `unknown` value the recharts `(props, event)` call signature. */
+function isRechartsEventHandler(value: unknown): value is RechartsEventHandler {
+  return typeof value === "function";
+}
+
+/**
+ * Returns a record of the event handlers on `input`, each rewrapped to be called
+ * with `(props, event)`. Pass `newHandler` to replace every handler with one
+ * uniform callback (recharts uses this for synthetic forwarding). Returns `null`
+ * for non-object inputs.
+ */
+export function adaptEventHandlers(
+  input: unknown,
+  newHandler?: (e?: Event) => unknown,
+): Record<string, EventHandler> | null {
+  if (input == null || typeof input !== "object" || Array.isArray(input)) {
+    return null;
+  }
+
+  const inputProps: Record<string, unknown> = { ...input };
+  const out: Record<string, EventHandler> = {};
+
+  Object.keys(inputProps).forEach((key) => {
+    const value = inputProps[key];
+    if (isEventKey(key) && isRechartsEventHandler(value)) {
+      out[key] = newHandler ?? ((e: Event) => value(inputProps, e));
+    }
+  });
+
+  return out;
+}
+
+/**
+ * Returns the raw (unwrapped) event handlers on `input`. Used by a parent component
+ * to forward a user's event props down to a child (e.g. Line → Curve) where the
+ * child's own `adaptEventHandlers` performs the props-first wrapping.
+ */
+export function pickEventHandlers(input: unknown): Record<string, unknown> {
+  if (input == null || typeof input !== "object" || Array.isArray(input)) {
+    return {};
+  }
+  const inputProps: Record<string, unknown> = { ...input };
+  const out: Record<string, unknown> = {};
+  Object.keys(inputProps).forEach((key) => {
+    const value = inputProps[key];
+    if (isEventKey(key) && typeof value === "function") {
+      out[key] = value;
+    }
+  });
+  return out;
+}

package/src/util/axisPropsAreEqual.ts

@@ -0,0 +1,42 @@
+// Ported from recharts 3.8.1 src/util/axisPropsAreEqual.ts (commit 7a23854).
+import { AxisRange } from "../state/selectors/axisSelectors";
+import { AxisDomain } from "./types";
+import { propsAreEqual } from "./propsAreEqual";
+
+function shortArraysAreEqual(
+  arr1: AxisDomain | AxisRange | undefined,
+  arr2: AxisDomain | AxisRange | undefined,
+): boolean {
+  if (arr1 === arr2) {
+    return true;
+  }
+
+  if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
+    return arr1[0] === arr2[0] && arr1[1] === arr2[1];
+  }
+
+  return false;
+}
+
+export function axisPropsAreEqual<
+  T extends Record<string, unknown> & {
+    domain?: AxisDomain;
+    range?: AxisRange;
+  },
+>(prevProps: T, nextProps: T): boolean {
+  if (prevProps === nextProps) {
+    return true;
+  }
+  const { domain: prevDomain, range: prevRange, ...prevRest } = prevProps;
+  const { domain: nextDomain, range: nextRange, ...nextRest } = nextProps;
+
+  if (!shortArraysAreEqual(prevDomain, nextDomain)) {
+    return false;
+  }
+
+  if (!shortArraysAreEqual(prevRange, nextRange)) {
+    return false;
+  }
+
+  return propsAreEqual(prevRest, nextRest);
+}

package/src/util/collectionUtils.ts

@@ -0,0 +1,83 @@
+// Replaces es-toolkit core `sortBy` / `uniqBy` / `range` — faithful ports of
+// the es-toolkit implementations (MIT), adapted to this repo's type discipline.
+
+/**
+ * es-toolkit `compareValues` (ascending): JS relational comparison of the
+ * mapped criterion values. Numbers and strings compare natively; mixed pairs
+ * fall back to numeric coercion, mirroring the abstract `<`/`>` semantics.
+ */
+function compareValues(a: unknown, b: unknown): number {
+  if (typeof a === "number" && typeof b === "number") {
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+  if (typeof a === "string" && typeof b === "string") {
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+  const an = Number(a);
+  const bn = Number(b);
+  if (!Number.isNaN(an) && !Number.isNaN(bn)) {
+    return an < bn ? -1 : an > bn ? 1 : 0;
+  }
+  return 0;
+}
+
+/**
+ * Sorts by the given criteria (object keys or mapper functions), ascending.
+ * Stable: ties keep their original order (native sort is stable per ES2019).
+ */
+export function sortBy<T extends object>(
+  arr: readonly T[],
+  criteria: Array<((item: T) => unknown) | keyof T>,
+): T[] {
+  const mapped = arr.map((item) => ({
+    item,
+    keys: criteria.map((c) => (typeof c === "function" ? c(item) : item[c])),
+  }));
+  mapped.sort((a, b) => {
+    for (let i = 0; i < a.keys.length; i++) {
+      const order = compareValues(a.keys[i], b.keys[i]);
+      if (order !== 0) {
+        return order;
+      }
+    }
+    return 0;
+  });
+  return mapped.map((m) => m.item);
+}
+
+/**
+ * Unique elements by mapped key; the FIRST occurrence of each key is kept.
+ * Keys compare by Map semantics (SameValueZero).
+ */
+export function uniqBy<T, U>(
+  arr: readonly T[],
+  mapper: (item: T, index: number, array: readonly T[]) => U,
+): T[] {
+  const map = new Map<U, T>();
+  let index = 0;
+  for (const item of arr) {
+    const key = mapper(item, index, arr);
+    if (!map.has(key)) {
+      map.set(key, item);
+    }
+    index++;
+  }
+  return Array.from(map.values());
+}
+
+/** Integers from `start` (inclusive) to `end` (exclusive), step 1. */
+export function range(start: number, end?: number, step = 1): number[] {
+  if (end == null) {
+    end = start;
+    start = 0;
+  }
+  if (!Number.isInteger(step) || step === 0) {
+    throw new Error("The step value must be a non-zero integer.");
+  }
+  const length = Math.max(Math.ceil((end - start) / step), 0);
+  const result: number[] = new Array<number>(length);
+  for (let i = 0; i < length; i++) {
+    result[i] = start + i * step;
+  }
+  return result;
+}

package/src/util/createCartesianCharts.tsx

@@ -0,0 +1,101 @@
+// Ported from recharts 3.8.1 src/util/createCartesianCharts.tsx.
+// Solid-native: React.ComponentType → `(props) => JSX.Element`. The layout
+// binding wrapper spreads the user props then sets `layout` as a static
+// attribute LAST, so the bound layout wins over any passed value; the public
+// type omits `layout` so TS rejects it too.
+import type { JSX } from "@solidjs/web";
+import { AreaChart as OriginalAreaChart } from "../chart/AreaChart";
+import { BarChart as OriginalBarChart } from "../chart/BarChart";
+import { LineChart as OriginalLineChart } from "../chart/LineChart";
+import { ComposedChart as OriginalComposedChart } from "../chart/ComposedChart";
+import { ScatterChart as OriginalScatterChart } from "../chart/ScatterChart";
+import { FunnelChart as OriginalFunnelChart } from "../chart/FunnelChart";
+import type { CartesianChartProps } from "./types";
+
+type Component<P> = (props: P) => JSX.Element;
+type ChartComponent<TData> = Component<Omit<CartesianChartProps<TData>, "layout">>;
+
+export type TypedHorizontalChartContext<TData, _TCategorical, _TNumerical, TComponents> = {
+  AreaChart: ChartComponent<TData>;
+  BarChart: ChartComponent<TData>;
+  LineChart: ChartComponent<TData>;
+  ComposedChart: ChartComponent<TData>;
+  ScatterChart: ChartComponent<TData>;
+} & Omit<TComponents, "Funnel" | "FunnelChart">;
+
+export type TypedVerticalChartContext<TData, _TCategorical, _TNumerical, TComponents> = {
+  AreaChart: ChartComponent<TData>;
+  BarChart: ChartComponent<TData>;
+  LineChart: ChartComponent<TData>;
+  ComposedChart: ChartComponent<TData>;
+  ScatterChart: ChartComponent<TData>;
+  FunnelChart: ChartComponent<TData>;
+} & TComponents;
+
+const createCartesianCharts = <TData,>(
+  layout: "horizontal" | "vertical",
+): {
+  AreaChart: ChartComponent<TData>;
+  BarChart: ChartComponent<TData>;
+  LineChart: ChartComponent<TData>;
+  ComposedChart: ChartComponent<TData>;
+  ScatterChart: ChartComponent<TData>;
+} => ({
+  AreaChart: (props) => <OriginalAreaChart {...props} layout={layout} />,
+  BarChart: (props) => <OriginalBarChart {...props} layout={layout} />,
+  LineChart: (props) => <OriginalLineChart {...props} layout={layout} />,
+  ComposedChart: (props) => <OriginalComposedChart {...props} layout={layout} />,
+  ScatterChart: (props) => <OriginalScatterChart {...props} layout={layout} />,
+});
+
+export type NoFunnel<T> = "Funnel" extends keyof T
+  ? never
+  : "FunnelChart" extends keyof T
+    ? never
+    : T;
+
+/**
+ * Creates a typed context for horizontal Cartesian charts. Curries the chart
+ * definition to statically bind `layout="horizontal"`. Rejects strictly vertical
+ * components (`Funnel`, `FunnelChart`) at compile time.
+ *
+ * @since 3.8
+ */
+export function createHorizontalChart<TData, TCategorical = string, TNumerical = number>() {
+  return function withComponents<TComponents extends Record<string, unknown>>(
+    components: NoFunnel<TComponents>,
+  ): TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents> {
+    // The wrapper-chart map + the caller's components don't structurally match the
+    // mapped result type (component identity is preserved at runtime, remapped only
+    // at the type level), so the unsound cast is intentional — same as recharts.
+    // eslint-disable-next-line typescript/consistent-type-assertions -- runtime identity preserved; type is a remap
+    return {
+      ...createCartesianCharts<TData>("horizontal"),
+      // eslint-disable-next-line typescript/consistent-type-assertions -- NoFunnel<T> narrows to T at runtime
+      ...(components as TComponents),
+    } as unknown as TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents>;
+  };
+}
+
+/**
+ * Creates a typed context for vertical Cartesian charts. Curries the chart
+ * definition to statically bind `layout="vertical"`. Natively supports strictly
+ * vertical components like `Funnel` and `FunnelChart`.
+ *
+ * @since 3.8
+ */
+export function createVerticalChart<TData, TCategorical = string, TNumerical = number>() {
+  return function withComponents<TComponents extends Record<string, unknown>>(
+    components: TComponents,
+  ): TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents> {
+    const FunnelChart: ChartComponent<TData> = (props) => (
+      <OriginalFunnelChart {...props} layout="vertical" />
+    );
+    // eslint-disable-next-line typescript/consistent-type-assertions -- runtime identity preserved; type is a remap
+    return {
+      ...createCartesianCharts<TData>("vertical"),
+      FunnelChart,
+      ...components,
+    } as unknown as TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents>;
+  };
+}