@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.20

package/dts/chart/utils/transition.d.ts

@@ -0,0 +1,178 @@
+import {
+  type ExtrapolationType,
+  type SharedValue,
+  type WithSpringConfig,
+  type WithTimingConfig,
+} from 'react-native-reanimated';
+import { type SkPath } from '@shopify/react-native-skia';
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+export type Transition = (
+  | ({
+      type: 'timing';
+    } & WithTimingConfig)
+  | ({
+      type: 'spring';
+    } & WithSpringConfig)
+) & {
+  /**
+   * Delay in milliseconds (ms) before the animation starts.
+   *
+   * @example
+   * // Wait 2 seconds before animating
+   * { type: 'timing', duration: 500, delay: 2000 }
+   */
+  delay?: number;
+};
+/**
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
+ */
+export declare const defaultTransition: Transition;
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export declare const instantTransition: Transition;
+/**
+ * Duration in milliseconds for accessory elements to fade in.
+ */
+export declare const accessoryFadeTransitionDuration = 150;
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export declare const accessoryFadeTransitionDelay = 350;
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
+ */
+export declare const defaultAccessoryEnterTransition: Transition;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export declare const getTransition: (
+  value: Transition | null | undefined,
+  animate: boolean,
+  defaultValue: Transition,
+) => Transition;
+/**
+ * @worklet
+ */
+type Interpolator<T> = (
+  value: number,
+  input: number[],
+  output: T[],
+  options: ExtrapolationType,
+  result: T,
+) => T;
+export declare const useInterpolator: <T>(
+  factory: () => T,
+  value: SharedValue<number>,
+  interpolator: Interpolator<T>,
+  input: number[],
+  output: T[],
+  options?: ExtrapolationType,
+) => SharedValue<T>;
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export declare const buildTransition: (targetValue: number, transition: Transition) => number;
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transitions - Transition configuration for enter and update animations
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
+ * });
+ */
+export declare const usePathTransition: ({
+  currentPath,
+  initialPath,
+  transitions,
+  transition,
+}: {
+  /**
+   * Current target path to animate to.
+   */
+  currentPath: string;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to currentPath.
+   * If not provided, defaults to currentPath (no enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Transition configuration for enter and update animations.
+   */
+  transitions?: {
+    /**
+     * Transition for the initial enter animation (initialPath → currentPath).
+     * Only used when `initialPath` is provided.
+     * If not provided, falls back to `update`.
+     */
+    enter?: Transition;
+    /**
+     * Transition for subsequent data update animations.
+     * @default defaultTransition
+     */
+    update?: Transition;
+  };
+  /**
+   * Transition for updates.
+   * @deprecated Use `transitions.update` instead.
+   */
+  transition?: Transition;
+}) => SharedValue<SkPath>;
+export {};
+//# sourceMappingURL=transition.d.ts.map

package/dts/chart/utils/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAGF,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAyB7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAoErB,CAAC"}

package/esm/chart/CartesianChart.js

@@ -1,40 +1,67 @@
-const _excluded = ["series", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "children", "width", "height", "style", "allowOverflowGestures"];
+const _excluded = ["series", "children", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo } from 'react';
-import { Svg } from 'react-native-svg';
 import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
 import { Box } from '@coinbase/cds-mobile/layout';
+import { Canvas, Skia } from '@shopify/react-native-skia';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { convertToSerializableScale } from './utils/scale';
+import { useChartContextBridge } from './ChartContextBridge';
 import { CartesianChartProvider } from './ChartProvider';
+import { Legend } from './legend';
 import { defaultAxisId, defaultChartInset, getAxisConfig, getAxisDomain, getAxisRange, getAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChartCanvas = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  const ContextBridge = useChartContextBridge();
+  return /*#__PURE__*/_jsx(Canvas, {
+    style: [{
+      width: '100%',
+      height: '100%'
+    }, style],
+    children: /*#__PURE__*/_jsx(ContextBridge, {
+      children: children
+    })
+  });
+});
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
       series,
+      children,
       animate = true,
       enableScrubbing,
-      xAxis: xAxisConfigInput,
-      yAxis: yAxisConfigInput,
-      inset: insetInput,
+      xAxis: xAxisConfigProp,
+      yAxis: yAxisConfigProp,
+      inset,
       onScrubberPositionChange,
-      children,
+      legend,
+      legendPosition = 'bottom',
+      legendAccessibilityLabel,
       width = '100%',
       height = '100%',
       style,
-      allowOverflowGestures
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      styles,
+      allowOverflowGestures,
+      fontFamilies,
+      fontProvider: fontProviderProp,
+      // React Native will collapse views by default when only used
+      // to group children, which interferes with gesture-handler
+      // https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#:~:text=%7B%0A%20%20return%20%3C-,View,-collapsable%3D%7B
+      collapsable = false
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   const [containerLayout, onContainerLayout] = useLayout();
-  const chartWidth = typeof width === 'number' ? width : containerLayout.width;
-  const chartHeight = typeof height === 'number' ? height : containerLayout.height;
-  const userInset = useMemo(() => {
-    return getChartInset(insetInput, defaultChartInset);
-  }, [insetInput]);
+  const chartWidth = containerLayout.width;
+  const chartHeight = containerLayout.height;
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // there can only be one x axis but the helper function always returns an array
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigInput)[0], [xAxisConfigInput]);
-  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigInput), [yAxisConfigInput]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
   const {
     renderedAxes,
     registerAxis,
@@ -42,11 +69,11 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     axisPadding
   } = useTotalAxisPadding();
   const totalInset = useMemo(() => ({
-    top: userInset.top + axisPadding.top,
-    right: userInset.right + axisPadding.right,
-    bottom: userInset.bottom + axisPadding.bottom,
-    left: userInset.left + axisPadding.left
-  }), [userInset, axisPadding]);
+    top: calculatedInset.top + axisPadding.top,
+    right: calculatedInset.right + axisPadding.right,
+    bottom: calculatedInset.bottom + axisPadding.bottom,
+    left: calculatedInset.left + axisPadding.left
+  }), [calculatedInset, axisPadding]);
   const chartRect = useMemo(() => {
     if (chartWidth <= 0 || chartHeight <= 0) return {
       x: 0,
@@ -63,8 +90,14 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       height: availableHeight > 0 ? availableHeight : 0
     };
   }, [chartHeight, chartWidth, totalInset]);
-  const xAxis = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return undefined;
+  const {
+    xAxis,
+    xScale
+  } = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
     const domain = getAxisDomain(xAxisConfig, series != null ? series : [], 'x');
     const range = getAxisRange(xAxisConfig, chartRect, 'x');
     const axisConfig = {
@@ -75,11 +108,47 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       categoryPadding: xAxisConfig.categoryPadding,
       domainLimit: xAxisConfig.domainLimit
     };
-    return axisConfig;
+
+    // Create the scale
+    const scale = getAxisScale({
+      config: axisConfig,
+      type: 'x',
+      range: axisConfig.range,
+      dataDomain: axisConfig.domain
+    });
+    if (!scale) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
+
+    // Update axis config with actual scale domain (after .nice() or other adjustments)
+    const scaleDomain = scale.domain();
+    const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+      min: scaleDomain[0],
+      max: scaleDomain[1]
+    } : axisConfig.domain;
+    const finalAxisConfig = _extends({}, axisConfig, {
+      domain: actualDomain
+    });
+    return {
+      xAxis: finalAxisConfig,
+      xScale: scale
+    };
   }, [xAxisConfig, series, chartRect]);
-  const yAxes = useMemo(() => {
+  const xSerializableScale = useMemo(() => {
+    if (!xScale) return;
+    return convertToSerializableScale(xScale);
+  }, [xScale]);
+  const {
+    yAxes,
+    yScales
+  } = useMemo(() => {
     const axes = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      yAxes: axes,
+      yScales: scales
+    };
     yAxisConfig.forEach(axisParam => {
       var _axisParam$id, _series$filter, _axisParam$domainLimi;
       const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
@@ -90,33 +159,19 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
       })) != null ? _series$filter : [];
 
-      // Calculate domain and range in one pass
-      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      // Calculate domain and range
+      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
       const range = getAxisRange(axisParam, chartRect, 'y');
-      axes.set(axisId, {
+      const axisConfig = {
         scaleType: axisParam.scaleType,
-        domain,
+        domain: dataDomain,
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
         domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : 'nice'
-      });
-    });
-    return axes;
-  }, [yAxisConfig, series, chartRect]);
-  const xScale = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0 || xAxis === undefined) return undefined;
-    return getAxisScale({
-      config: xAxis,
-      type: 'x',
-      range: xAxis.range,
-      dataDomain: xAxis.domain
-    });
-  }, [chartRect, xAxis]);
-  const yScales = useMemo(() => {
-    const scales = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return scales;
-    yAxes.forEach((axisConfig, axisId) => {
+      };
+
+      // Create the scale
       const scale = getAxisScale({
         config: axisConfig,
         type: 'y',
@@ -125,17 +180,42 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       });
       if (scale) {
         scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _extends({}, axisConfig, {
+          domain: actualDomain
+        }));
       }
     });
-    return scales;
-  }, [chartRect, yAxes]);
+    return {
+      yAxes: axes,
+      yScales: scales
+    };
+  }, [yAxisConfig, series, chartRect]);
+
+  // We need a set of serialized scales usable in UI thread
+  const ySerializableScales = useMemo(() => {
+    const serializableScales = new Map();
+    yScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        serializableScales.set(id, serializableScale);
+      }
+    });
+    return serializableScales;
+  }, [yScales]);
   const getXAxis = useCallback(() => xAxis, [xAxis]);
   const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
   const getXScale = useCallback(() => xScale, [xScale]);
   const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
+  const getXSerializableScale = useCallback(() => xSerializableScale, [xSerializableScale]);
+  const getYSerializableScale = useCallback(id => ySerializableScales.get(id != null ? id : defaultAxisId), [ySerializableScales]);
   const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
-
-  // Compute stacked data for series with stack properties
   const stackedDataMap = useMemo(() => {
     if (!series) return new Map();
     return calculateStackedSeriesData(series);
@@ -144,6 +224,20 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const dataLength = useMemo(() => {
+    // If xAxis has categorical data, use that length
+    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
+      return xAxisConfig.data.length;
+    }
+
+    // Otherwise, find the longest series
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
+    }, 0);
+  }, [xAxisConfig.data, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -155,7 +249,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
     if (axis.position === 'top') {
       // Position above the chart rect, accounting for user inset
-      const startY = userInset.top + offsetFromPreviousAxes;
+      const startY = calculatedInset.top + offsetFromPreviousAxes;
       return {
         x: chartRect.x,
         y: startY,
@@ -173,7 +267,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       };
     } else if (axis.position === 'left') {
       // Position to the left of the chart rect, accounting for user inset
-      const startX = userInset.left + offsetFromPreviousAxes;
+      const startX = calculatedInset.left + offsetFromPreviousAxes;
       return {
         x: startX,
         y: chartRect.y,
@@ -190,7 +284,11 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         height: chartRect.height
       };
     }
-  }, [renderedAxes, chartRect, userInset]);
+  }, [renderedAxes, chartRect, calculatedInset]);
+  const fontProvider = useMemo(() => {
+    if (fontProviderProp) return fontProviderProp;
+    return Skia.TypefaceFontProvider.Make();
+  }, [fontProviderProp]);
   const contextValue = useMemo(() => ({
     series: series != null ? series : [],
     getSeries,
@@ -198,41 +296,67 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     animate,
     width: chartWidth,
     height: chartHeight,
+    fontFamilies,
+    fontProvider,
     getXAxis,
     getYAxis,
     getXScale,
     getYScale,
+    getXSerializableScale,
+    getYSerializableScale,
     drawingArea: chartRect,
+    dataLength,
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, registerAxis, unregisterAxis, getAxisBounds]);
-  const containerStyles = useMemo(() => {
-    const dynamicStyles = {};
-    if (typeof width === 'string') {
-      dynamicStyles.width = width;
-    }
-    if (typeof height === 'string') {
-      dynamicStyles.height = height;
+  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  const rootStyles = useMemo(() => {
+    return [style, styles == null ? void 0 : styles.root];
+  }, [style, styles == null ? void 0 : styles.root]);
+  const legendElement = useMemo(() => {
+    if (!legend) return;
+    if (legend === true) {
+      const isHorizontal = legendPosition === 'top' || legendPosition === 'bottom';
+      const flexDirection = isHorizontal ? 'row' : 'column';
+      return /*#__PURE__*/_jsx(Legend, {
+        accessibilityLabel: legendAccessibilityLabel,
+        flexDirection: flexDirection
+      });
     }
-    return [style, dynamicStyles];
-  }, [style, width, height]);
+    return legend;
+  }, [legend, legendAccessibilityLabel, legendPosition]);
+  const rootBoxProps = useMemo(() => _extends({
+    ref,
+    accessibilityLiveRegion: 'polite',
+    accessibilityRole: 'image',
+    height,
+    style: rootStyles,
+    width
+  }, props), [ref, height, rootStyles, width, props]);
   return /*#__PURE__*/_jsx(CartesianChartProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(ScrubberProvider, {
       allowOverflowGestures: allowOverflowGestures,
       enableScrubbing: enableScrubbing,
       onScrubberPositionChange: onScrubberPositionChange,
-      children: /*#__PURE__*/_jsx(Box, _extends({
-        ref: ref,
-        accessibilityLiveRegion: "polite",
-        accessibilityRole: "image",
+      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({}, rootBoxProps, {
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row',
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsx(Box, {
+          collapsable: collapsable,
+          onLayout: onContainerLayout,
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(ChartCanvas, {
+            style: styles == null ? void 0 : styles.chart,
+            children: children
+          })
+        }), (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
+      })) : /*#__PURE__*/_jsx(Box, _extends({}, rootBoxProps, {
+        collapsable: collapsable,
         onLayout: onContainerLayout,
-        style: containerStyles
-      }, props, {
-        children: /*#__PURE__*/_jsx(Svg, {
-          height: chartHeight,
-          width: chartWidth,
+        children: /*#__PURE__*/_jsx(ChartCanvas, {
+          style: styles == null ? void 0 : styles.chart,
           children: children
         })
       }))