solid-recharts 0.1.0

package/src/cartesian/useAnimatedLineLength.ts

@@ -0,0 +1,84 @@
+// Ported from recharts 3.9.0 src/cartesian/useAnimatedLineLength.ts.
+//
+// Solid 2.0 deviation: React `useRef` + `useCallback` exist to survive re-renders
+// and keep a stable callback identity. A Solid component body runs ONCE, so the
+// refs become plain `let` closure variables and the returned function is naturally
+// stable. The data-change detection (prevPoints !== points) that React does during
+// render is moved into the returned callback's caller convention: the consumer
+// calls `markDataChange(points)` once per render (cheap reference compare) before
+// driving frames, mirroring the React in-render ref bookkeeping. We expose it as a
+// small object so Line can both detect data changes and read the visible length.
+import { round } from "../util/round";
+
+export type AnimatedLineLength = {
+  /**
+   * Notify the hook that the point set may have changed. When `points` differs by
+   * reference from the previous call, the next animation resumes from the furthest
+   * length already drawn (so a mid-animation data change does not jump back to 0).
+   */
+  markDataChange: (points: unknown) => void;
+  /**
+   * `(animationElapsedTime, totalLength) => number | null`:
+   *   - `animationElapsedTime` is the animation progress (0 to 1),
+   *   - `totalLength` is the current total SVG path length in pixels,
+   *   - returns the visible length in pixels, or `null` once the line is fully
+   *     visible (meaning no entrance stroke-dasharray is needed any more).
+   */
+  getVisibleLength: (animationElapsedTime: number, totalLength: number) => number | null;
+};
+
+/**
+ * Tracks the animated visible length of a Line's SVG path across data changes.
+ *
+ * Invariants:
+ * 1. The visible length only grows (monotonically non-decreasing with animationElapsedTime).
+ * 2. The visible length changes continuously — no jumps when data changes mid-animation.
+ *    This is achieved by tracking the maximum animated length in pixels and using it
+ *    as the starting point for the next animation.
+ * 3. Once the line reaches 100% visibility, it never becomes partially visible again.
+ *    In that case the hook returns `null`, meaning no animation stroke-dasharray is needed.
+ */
+export function useAnimatedLineLength(): AnimatedLineLength {
+  let startingLength = 0;
+  let maxAnimatedLength = 0;
+  let reachedFull = false;
+  // `undefined` sentinel so the first markDataChange (even with `undefined` points)
+  // does not spuriously rebase — recharts seeds prevPointsRef with the first points.
+  let prevPoints: unknown;
+  let seeded = false;
+
+  const markDataChange = (points: unknown): void => {
+    if (!seeded) {
+      prevPoints = points;
+      seeded = true;
+      return;
+    }
+    if (prevPoints !== points) {
+      startingLength = maxAnimatedLength;
+      prevPoints = points;
+    }
+  };
+
+  const getVisibleLength = (animationElapsedTime: number, totalLength: number): number | null => {
+    if (reachedFull) {
+      return null;
+    }
+
+    const visibleLength = Math.min(
+      round(startingLength + animationElapsedTime * totalLength),
+      totalLength,
+    );
+
+    if (animationElapsedTime > 0 && totalLength > 0) {
+      maxAnimatedLength = Math.max(maxAnimatedLength, visibleLength);
+      if (visibleLength >= totalLength) {
+        reachedFull = true;
+        return null;
+      }
+    }
+
+    return visibleLength;
+  };
+
+  return { markDataChange, getVisibleLength };
+}

package/src/chart/AreaChart.tsx

@@ -0,0 +1,30 @@
+// Ported from recharts 3.8.1 src/chart/AreaChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart
+// (mirrors LineChart — differs only in chartName / allowed tooltip event types).
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { CartesianChart } from "./CartesianChart";
+import { CartesianChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"];
+
+export interface AreaChartProps<
+  DataPointType = unknown,
+> extends CartesianChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function AreaChart<DataPointType = unknown>(
+  props: AreaChartProps<DataPointType>,
+): JSX.Element {
+  return (
+    <CartesianChart
+      chartName="AreaChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={props}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/BarChart.tsx

@@ -0,0 +1,27 @@
+// Ported from recharts 3.8.1 src/chart/BarChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { CartesianChart } from "./CartesianChart";
+import { CartesianChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis", "item"];
+
+export interface BarChartProps<DataPointType = unknown> extends CartesianChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function BarChart<DataPointType = unknown>(
+  props: BarChartProps<DataPointType>,
+): JSX.Element {
+  return (
+    <CartesianChart
+      chartName="BarChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={props}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/CartesianChart.tsx

@@ -0,0 +1,91 @@
+// Ported from recharts 3.8.1 src/chart/CartesianChart.tsx (commit 7a23854).
+//
+// Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
+// `?? default` accessors (see the defaults-use-solid-merge memory — using
+// explicit nullish-coalescing avoids `merge`'s undefined-override gotcha AND the
+// required-ness typing gap). Provider + Report components mirror recharts.
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { ChartOptions } from "../state/optionsSlice";
+import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
+import { ChartDataContextProvider } from "../context/chartDataContext";
+import { ReportMainChartProps } from "../state/ReportMainChartProps";
+import { ReportChartProps } from "../state/ReportChartProps";
+import { ReportEventSettings } from "../state/ReportEventSettings";
+import { CartesianChartProps, LayoutType, Margin, TooltipEventType } from "../util/types";
+import { TooltipPayloadSearcher } from "../state/tooltipSlice";
+import { UpdatableChartOptions } from "../state/rootPropsSlice";
+import { CategoricalChart } from "./CategoricalChart";
+import { useIsPanorama } from "../context/PanoramaContext";
+
+const defaultMargin: Margin = { top: 5, right: 5, bottom: 5, left: 5 };
+
+/**
+ * One-time, immutable options that decide a Cartesian chart's behavior. Users
+ * usually go through a convenience component (LineChart, BarChart, …).
+ */
+export interface CartesianChartOptions {
+  chartName: string;
+  defaultTooltipEventType: TooltipEventType;
+  validateTooltipEventTypes: ReadonlyArray<TooltipEventType>;
+  tooltipPayloadSearcher: TooltipPayloadSearcher;
+  categoricalChartProps: CartesianChartProps;
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export const CartesianChart = (props: CartesianChartOptions): JSX.Element => {
+  const cp = (): CartesianChartProps => props.categoricalChartProps;
+
+  // Brush panorama: a nested `<SomeChart>` inside `<Brush>` is an overview of the
+  // OUTER chart's full dataset. Instead of recharts' cloneElement-into-the-main-
+  // surface, render this nested chart's graphical items directly into the existing
+  // panorama context — they register into the outer store and draw into the brush's
+  // panorama surface (isPanorama=true → full data range + brush viewBox). No new
+  // store/wrapper/surface; the chart-level props (width/height/data) are the outer's.
+  if (useIsPanorama()) {
+    return <>{cp().children}</>;
+  }
+
+  const options = (): ChartOptions => ({
+    chartName: props.chartName,
+    defaultTooltipEventType: props.defaultTooltipEventType,
+    validateTooltipEventTypes: props.validateTooltipEventTypes,
+    tooltipPayloadSearcher: props.tooltipPayloadSearcher,
+    eventEmitter: undefined,
+  });
+
+  const layout = (): LayoutType => cp().layout ?? "horizontal";
+  const margin = (): Partial<Margin> => cp().margin ?? defaultMargin;
+
+  const updatable = (): UpdatableChartOptions => ({
+    accessibilityLayer: cp().accessibilityLayer ?? true,
+    barCategoryGap: cp().barCategoryGap ?? "10%",
+    barGap: cp().barGap ?? 4,
+    barSize: cp().barSize,
+    class: cp().class,
+    maxBarSize: cp().maxBarSize,
+    stackOffset: cp().stackOffset ?? "none",
+    syncId: cp().syncId,
+    syncMethod: cp().syncMethod ?? "index",
+    baseValue: cp().baseValue,
+    reverseStackOrder: cp().reverseStackOrder ?? false,
+  });
+
+  return (
+    <RechartsStoreProvider preloadedState={{ options: options() }}>
+      <ChartDataContextProvider chartData={cp().data} />
+      <ReportMainChartProps layout={layout()} margin={margin()} />
+      <ReportEventSettings
+        throttleDelay={cp().throttleDelay}
+        throttledEvents={cp().throttledEvents}
+      />
+      <ReportChartProps {...updatable()} />
+      {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
+          children getter here, before the provider sets context — running them
+          outside the store); pass children as a lazy JSX child instead. */}
+      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
+        {cp().children}
+      </CategoricalChart>
+    </RechartsStoreProvider>
+  );
+};

package/src/chart/CategoricalChart.tsx

@@ -0,0 +1,60 @@
+// Ported from recharts 3.8.1 src/chart/CategoricalChart.tsx (commit 7a23854).
+//
+// Solid deviations: `forwardRef` → `ref` prop; no destructuring (omit + props);
+// `className` → `class`. The `compact` (Brush panorama) branch is deferred. Event
+// handlers are not forwarded yet (RechartsWrapper is render-only).
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { RootSurface } from "../container/RootSurface";
+import { RechartsWrapper } from "./RechartsWrapper";
+import { ClipPathProvider } from "../container/ClipPathProvider";
+import { CartesianChartProps } from "../util/types";
+import { svgPropertiesNoEventsKeepCase } from "../util/svgPropertiesNoEvents";
+
+export interface CategoricalChartProps extends CartesianChartProps {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
+  const attrs = (): Record<string, unknown> =>
+    svgPropertiesNoEventsKeepCase({
+      ...omit(
+        props,
+        "width",
+        "height",
+        "responsive",
+        "children",
+        "class",
+        "style",
+        "compact",
+        "title",
+        "desc",
+        "ref",
+      ),
+    });
+
+  return (
+    <RechartsWrapper
+      class={props.class}
+      style={props.style}
+      width={props.width}
+      height={props.height}
+      responsive={props.responsive ?? false}
+      onClick={props.onClick}
+      onMouseLeave={props.onMouseLeave}
+      onMouseEnter={props.onMouseEnter}
+      onMouseMove={props.onMouseMove}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onContextMenu={props.onContextMenu}
+      onDoubleClick={props.onDoubleClick}
+      onTouchStart={props.onTouchStart}
+      onTouchMove={props.onTouchMove}
+      onTouchEnd={props.onTouchEnd}
+    >
+      <RootSurface otherAttributes={attrs()} title={props.title} desc={props.desc} ref={props.ref}>
+        <ClipPathProvider>{props.children}</ClipPathProvider>
+      </RootSurface>
+    </RechartsWrapper>
+  );
+};

package/src/chart/ComposedChart.tsx

@@ -0,0 +1,29 @@
+// Ported from recharts 3.8.1 src/chart/ComposedChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { CartesianChart } from "./CartesianChart";
+import { CartesianChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"];
+
+export interface ComposedChartProps<
+  DataPointType = unknown,
+> extends CartesianChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function ComposedChart<DataPointType = unknown>(
+  props: ComposedChartProps<DataPointType>,
+): JSX.Element {
+  return (
+    <CartesianChart
+      chartName="ComposedChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={props}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/FunnelChart.tsx

@@ -0,0 +1,29 @@
+// Ported from recharts 3.8.1 src/chart/FunnelChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { CartesianChart } from "./CartesianChart";
+import { CartesianChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["item"];
+
+export interface FunnelChartProps<
+  DataPointType = unknown,
+> extends CartesianChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function FunnelChart<DataPointType = unknown>(
+  props: FunnelChartProps<DataPointType>,
+): JSX.Element {
+  return (
+    <CartesianChart
+      chartName="FunnelChart"
+      defaultTooltipEventType="item"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={props}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/LineChart.tsx

@@ -0,0 +1,29 @@
+// Ported from recharts 3.8.1 src/chart/LineChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; the user-facing convenience wrapper over CartesianChart.
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { CartesianChart } from "./CartesianChart";
+import { CartesianChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"];
+
+export interface LineChartProps<
+  DataPointType = unknown,
+> extends CartesianChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function LineChart<DataPointType = unknown>(
+  props: LineChartProps<DataPointType>,
+): JSX.Element {
+  return (
+    <CartesianChart
+      chartName="LineChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={props}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/PieChart.tsx

@@ -0,0 +1,41 @@
+// Ported from recharts 3.8.1 src/chart/PieChart.tsx (commit 7a23854).
+// `forwardRef` → `ref` prop; the user-facing convenience wrapper over PolarChart.
+// `resolveDefaultProps` → Solid `merge` (lazy proxy — does NOT eagerly evaluate
+// the `children` getter, unlike an object spread). PieChart-specific defaults
+// (layout "centric", startAngle 0, endAngle 360) win over PolarChart's polar
+// defaults. `ref` is omitted from categoricalChartProps and passed separately,
+// mirroring the reference's forwardRef split.
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { PolarChart } from "./PolarChart";
+import { PolarChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["item"];
+
+const defaultPieChartProps = {
+  layout: "centric",
+  startAngle: 0,
+  endAngle: 360,
+} as const satisfies Partial<PolarChartProps>;
+
+export interface PieChartProps<DataPointType = unknown> extends PolarChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function PieChart<DataPointType = unknown>(
+  props: PieChartProps<DataPointType>,
+): JSX.Element {
+  const categoricalChartProps = merge(defaultPieChartProps, omit(props, "ref"));
+
+  return (
+    <PolarChart
+      chartName="PieChart"
+      defaultTooltipEventType="item"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={categoricalChartProps}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/PolarChart.tsx

@@ -0,0 +1,97 @@
+// Ported from recharts 3.8.1 src/chart/PolarChart.tsx (commit 7a23854).
+//
+// Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
+// `?? default` accessors (see the defaults-use-solid-merge memory). Mirrors the
+// Solid CartesianChart, with `layout` defaulting to "radial", `baseValue` always
+// undefined for polar, and a ReportPolarOptions reporting the polar geometry.
+// The polar geometry props (cx/cy/innerRadius/outerRadius/startAngle/endAngle)
+// pass through to CategoricalChart exactly as in the reference — svgPropertiesNoEvents
+// forwards cx/cy onto the root <svg> (faithful) and drops the rest.
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { ChartOptions } from "../state/optionsSlice";
+import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
+import { ChartDataContextProvider } from "../context/chartDataContext";
+import { ReportMainChartProps } from "../state/ReportMainChartProps";
+import { ReportChartProps } from "../state/ReportChartProps";
+import { ReportEventSettings } from "../state/ReportEventSettings";
+import { ReportPolarOptions } from "../state/ReportPolarOptions";
+import { Margin, PolarChartProps, PolarLayout, TooltipEventType } from "../util/types";
+import { TooltipPayloadSearcher } from "../state/tooltipSlice";
+import { UpdatableChartOptions } from "../state/rootPropsSlice";
+import { PolarChartOptions as PolarOptionsPayload } from "../state/polarOptionsSlice";
+import { CategoricalChart } from "./CategoricalChart";
+
+const defaultMargin: Margin = { top: 5, right: 5, bottom: 5, left: 5 };
+
+/**
+ * One-time, immutable options that decide a Polar chart's behavior. Users
+ * usually go through a convenience component (PieChart, RadarChart, …) which
+ * supplies the cx/cy/innerRadius/outerRadius/startAngle/endAngle defaults.
+ */
+export interface PolarChartOptions {
+  chartName: string;
+  defaultTooltipEventType: TooltipEventType;
+  validateTooltipEventTypes: ReadonlyArray<TooltipEventType>;
+  tooltipPayloadSearcher: TooltipPayloadSearcher;
+  categoricalChartProps: PolarChartProps;
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export const PolarChart = (props: PolarChartOptions): JSX.Element => {
+  const cp = (): PolarChartProps => props.categoricalChartProps;
+
+  const options = (): ChartOptions => ({
+    chartName: props.chartName,
+    defaultTooltipEventType: props.defaultTooltipEventType,
+    validateTooltipEventTypes: props.validateTooltipEventTypes,
+    tooltipPayloadSearcher: props.tooltipPayloadSearcher,
+    eventEmitter: undefined,
+  });
+
+  const layout = (): PolarLayout => cp().layout ?? "radial";
+  const margin = (): Partial<Margin> => cp().margin ?? defaultMargin;
+
+  const updatable = (): UpdatableChartOptions => ({
+    accessibilityLayer: cp().accessibilityLayer ?? true,
+    barCategoryGap: cp().barCategoryGap ?? "10%",
+    barGap: cp().barGap ?? 4,
+    barSize: cp().barSize,
+    class: cp().class,
+    maxBarSize: cp().maxBarSize,
+    stackOffset: cp().stackOffset ?? "none",
+    syncId: cp().syncId,
+    syncMethod: cp().syncMethod ?? "index",
+    // Polar charts never expose a baseValue.
+    baseValue: undefined,
+    reverseStackOrder: cp().reverseStackOrder ?? false,
+  });
+
+  const polar = (): PolarOptionsPayload => ({
+    cx: cp().cx ?? "50%",
+    cy: cp().cy ?? "50%",
+    startAngle: cp().startAngle ?? 0,
+    endAngle: cp().endAngle ?? 360,
+    innerRadius: cp().innerRadius ?? 0,
+    outerRadius: cp().outerRadius ?? "80%",
+  });
+
+  return (
+    <RechartsStoreProvider preloadedState={{ options: options() }}>
+      <ChartDataContextProvider chartData={cp().data} />
+      <ReportMainChartProps layout={layout()} margin={margin()} />
+      <ReportEventSettings
+        throttleDelay={cp().throttleDelay}
+        throttledEvents={cp().throttledEvents}
+      />
+      <ReportChartProps {...updatable()} />
+      <ReportPolarOptions {...polar()} />
+      {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
+          children getter here, before the provider sets context — running them
+          outside the store); pass children as a lazy JSX child instead. */}
+      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
+        {cp().children}
+      </CategoricalChart>
+    </RechartsStoreProvider>
+  );
+};

package/src/chart/RadarChart.tsx

@@ -0,0 +1,37 @@
+// Ported from recharts 3.8.1 src/chart/RadarChart.tsx (commit 7a23854).
+// `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge` (lazy proxy, see PieChart).
+// RadarChart-specific defaults: layout "centric", startAngle 90, endAngle -270.
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { PolarChart } from "./PolarChart";
+import { PolarChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"];
+
+const defaultRadarChartProps = {
+  layout: "centric",
+  startAngle: 90,
+  endAngle: -270,
+} as const satisfies Partial<PolarChartProps>;
+
+export interface RadarChartProps<DataPointType = unknown> extends PolarChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function RadarChart<DataPointType = unknown>(
+  props: RadarChartProps<DataPointType>,
+): JSX.Element {
+  const categoricalChartProps = merge(defaultRadarChartProps, omit(props, "ref"));
+
+  return (
+    <PolarChart
+      chartName="RadarChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={categoricalChartProps}
+      ref={props.ref}
+    />
+  );
+}

package/src/chart/RadialBarChart.tsx

@@ -0,0 +1,39 @@
+// Ported from recharts 3.8.1 src/chart/RadialBarChart.tsx (commit 7a23854).
+// `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge`. RadialBarChart defaults:
+// layout "radial", startAngle 0, endAngle 360 (PolarChart fills cx/cy/radii).
+import { merge, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { arrayTooltipSearcher } from "../state/optionsSlice";
+import { PolarChart } from "./PolarChart";
+import { PolarChartProps, TooltipEventType } from "../util/types";
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis", "item"];
+
+const defaultRadialBarChartProps = {
+  layout: "radial",
+  startAngle: 0,
+  endAngle: 360,
+} as const satisfies Partial<PolarChartProps>;
+
+export interface RadialBarChartProps<
+  DataPointType = unknown,
+> extends PolarChartProps<DataPointType> {
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+export function RadialBarChart<DataPointType = unknown>(
+  props: RadialBarChartProps<DataPointType>,
+): JSX.Element {
+  const categoricalChartProps = merge(defaultRadialBarChartProps, omit(props, "ref"));
+
+  return (
+    <PolarChart
+      chartName="RadialBarChart"
+      defaultTooltipEventType="axis"
+      validateTooltipEventTypes={allowedTooltipTypes}
+      tooltipPayloadSearcher={arrayTooltipSearcher}
+      categoricalChartProps={categoricalChartProps}
+      ref={props.ref}
+    />
+  );
+}