@coinbase/cds-mobile-visualization 3.4.0-beta.1 → 3.4.0-beta.10

package/esm/chart/area/GradientArea.js

@@ -1,110 +1,54 @@
-const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "clipRect"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "transition"];
 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 { memo, useId } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable gradient area component which uses Path.
+ * A customizable gradient area component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
  */
 export const GradientArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
-      fill,
+      fill: fillProp,
       fillOpacity = 1,
-      peakColor,
-      baselineColor,
+      gradient: gradientProp,
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
       yAxisId,
-      clipRect
+      animate,
+      transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const context = useCartesianChartContext();
+  const {
+    getYAxis
+  } = useCartesianChartContext();
   const theme = useTheme();
-  const patternId = useId();
-
-  // Get the y-scale for the specified axis (or default)
-  const yScale = context.getYScale(yAxisId);
-  const yRange = yScale == null ? void 0 : yScale.range();
-  const yDomain = yScale == null ? void 0 : yScale.domain();
-
-  // Use chart range if available, otherwise fall back to percentage
-  const useUserSpaceUnits = yRange !== undefined;
-  const gradientY1 = useUserSpaceUnits && yRange ? String(yRange[1]) : '0%';
-  const gradientY2 = useUserSpaceUnits && yRange ? String(yRange[0]) : '100%';
-
-  // Auto-calculate baseline position based on domain
-  let baselinePosition;
-  let baselinePercentage;
-  if (yScale && yDomain) {
-    const [minValue, maxValue] = yDomain;
-    let dataBaseline;
-    if (minValue >= 0) {
-      // All positive: baseline at min
-      dataBaseline = minValue;
-    } else if (maxValue <= 0) {
-      // All negative: baseline at max
-      dataBaseline = maxValue;
-    } else {
-      // Crosses zero: baseline at 0
-      dataBaseline = 0;
-    }
-    if (useUserSpaceUnits && yRange) {
-      // Get the actual y coordinate for the baseline
-      const scaledValue = yScale(baseline != null ? baseline : dataBaseline);
-      if (typeof scaledValue === 'number') {
-        baselinePosition = scaledValue;
-      }
-    } else {
-      // Calculate percentage position
-      baselinePercentage = (maxValue - (baseline != null ? baseline : dataBaseline)) / (maxValue - minValue) * 100 + "%";
-    }
-  }
-  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
-  const effectivePeakColor = peakColor != null ? peakColor : effectiveFill;
-  const effectiveBaselineColor = baselineColor != null ? baselineColor : effectiveFill;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(LinearGradient, {
-        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
-        id: patternId,
-        x1: useUserSpaceUnits ? '0' : '0%',
-        x2: useUserSpaceUnits ? '0' : '0%',
-        y1: gradientY1,
-        y2: gradientY2,
-        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /* Diverging gradient: peak opacity at extremes, baseline opacity at baseline */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: baselinePercentage != null ? baselinePercentage : (baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100 + "%",
-          stopColor: effectiveBaselineColor,
-          stopOpacity: baselineOpacity
-        }, "1"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "2")] : /* Simple gradient from peak to baseline */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: effectiveBaselineColor,
-          stopOpacity: baselineOpacity
-        }, "1")]
-      })
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      clipRect: clipRect,
-      d: d,
-      fill: "url(#" + patternId + ")"
-    }, pathProps))]
-  });
+  const yAxisConfig = getYAxis(yAxisId);
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!yAxisConfig) return;
+    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
+    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
+  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });

package/esm/chart/area/SolidArea.js

@@ -1,24 +1,38 @@
-const _excluded = ["d", "fill", "fillOpacity", "clipRect"];
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transition", "gradient"];
 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 { memo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable solid area component which uses Path.
+ * A customizable solid area component.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
  */
 export const SolidArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
       fill,
       fillOpacity = 1,
-      clipRect
+      yAxisId,
+      animate,
+      transition,
+      gradient
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(Path, _extends({
-    clipRect: clipRect,
+    animate: animate,
     d: d,
-    fill: fill,
-    fillOpacity: fillOpacity
-  }, props));
+    fill: fill != null ? fill : theme.color.fgPrimary,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -64,7 +64,7 @@ const AreaChartStories = () => {
           id: 'pageViews',
           data: [24, 13, -98, 39, 48, 38, 43]
         }],
-        type: "gradient",
+        type: "solid",
         yAxis: {
           showGrid: true
         },

package/esm/chart/axis/Axis.js

@@ -1,5 +1,7 @@
 /**
  * Animation variants for grouped axis tick labels - initial mount
+ * Note: Mobile currently doesn't use these variants. Axes render immediately without animation.
+ * Web uses similar variants with delay to match path enter animation timing.
  */
 export const axisTickLabelsInitialAnimationVariants = {
   initial: {

package/esm/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,11 @@
+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); }
+import { memo } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(ChartText, _extends({}, props));
+});

package/esm/chart/axis/XAxis.js

@@ -1,17 +1,19 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "height", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep"];
-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); }
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height"];
 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 { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { G, Line } from 'react-native-svg';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { ReferenceLine } from '../line/ReferenceLine';
-import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
-import { getAxisTicksData, isCategoricalScale } from '../utils';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedG = Animated.createAnimatedComponent(G);
+const AXIS_HEIGHT = 32;
+const LABEL_SIZE = 20;
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
       position = 'bottom',
@@ -19,18 +21,21 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount,
       ticks,
       tickLabelFormatter,
-      styles,
-      classNames,
+      TickLabelComponent = DefaultAxisTickLabel,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 2,
-      height = 32,
       minTickLabelGap = 4,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
       tickInterval = 32,
       tickMinStep = 1,
-      tickMaxStep
+      tickMaxStep,
+      label,
+      labelGap = 4,
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -46,17 +51,10 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   const xScale = getXScale();
   const xAxis = getXAxis();
   const axisBounds = getAxisBounds(registrationId);
-  const gridOpacity = useSharedValue(1);
-  const axisLineProps = useMemo(() => ({
-    stroke: theme.color.fg,
-    strokeLinecap: 'square',
-    strokeWidth: 1
-  }), [theme.color.fg]);
-  const axisTickMarkProps = useMemo(() => ({
-    stroke: theme.color.fg,
-    strokeLinecap: 'square',
-    strokeWidth: 1
-  }), [theme.color.fg]);
+
+  // Note: gridOpacity not currently used in Skia version
+  // const gridOpacity = useSharedValue(1);
+
   useEffect(() => {
     registerAxis(registrationId, position, height);
     return () => unregisterAxis(registrationId);
@@ -118,64 +116,73 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
       const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
-      const availableSpace = axisBounds.height - tickOffset;
+
+      // Use AXIS_HEIGHT for centering, not full axisBounds.height
+      // This ensures tick labels are centered in the axis area, not including label space
+      const availableSpace = AXIS_HEIGHT - tickOffset;
       const labelOffset = availableSpace / 2;
-      const labelY = position === 'top' ? axisBounds.y + labelOffset - tickOffset : axisBounds.y + labelOffset + tickOffset;
+
+      // For bottom position: start at axisBounds.y
+      // For top position with label: start at axisBounds.y + LABEL_SIZE
+      const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
+      const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
       return {
         x: tick.position,
         y: labelY,
         label: String(formatTick(tick.tick)),
         chartTextProps: {
-          className: classNames == null ? void 0 : classNames.tickLabel,
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          style: styles == null ? void 0 : styles.tickLabel,
           horizontalAlignment: 'center'
         }
       };
     });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames == null ? void 0 : classNames.tickLabel, styles == null ? void 0 : styles.tickLabel]);
-  const gridAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: gridOpacity.value
-  }));
-  if (!xScale) return;
-  return /*#__PURE__*/_jsxs(G, _extends({
-    "data-axis": "x",
-    "data-position": position
-  }, props, {
-    children: [showGrid && /*#__PURE__*/_jsx(AnimatedG, {
-      animatedProps: gridAnimatedStyle,
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, label]);
+  if (!xScale || !axisBounds) return;
+  const labelX = axisBounds.x + axisBounds.width / 2;
+  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
       children: ticksData.map((tick, index) => {
         const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
           LineComponent: GridLineComponent,
           dataX: tick.tick
         });
-        return /*#__PURE__*/_jsx(G, {
+        return /*#__PURE__*/_jsx(Group, {
           children: verticalLine
         }, "grid-" + tick.tick + "-" + index);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
       labels: chartTextData,
       minGap: minTickLabelGap
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(G, {
-      "data-testid": "tick-marks",
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: ticksData.map((tick, index) => {
         const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
-        const tickMarkSizePixels = tickMarkSize;
-        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSizePixels : axisBounds.y + axisBounds.height - tickMarkSizePixels;
-        return /*#__PURE__*/_jsx(Line, _extends({}, axisTickMarkProps, {
-          x1: tick.position,
-          x2: tick.position,
-          y1: tickY,
-          y2: tickY2
-        }), "tick-mark-" + tick.tick + "-" + index);
+        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSize : axisBounds.y + axisBounds.height - tickMarkSize;
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(tick.position, tickY, tick.position, tickY2),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, "tick-mark-" + tick.tick + "-" + index);
       })
-    }), axisBounds && showLine && /*#__PURE__*/_jsx(Line, _extends({}, axisLineProps, {
-      x1: axisBounds.x,
-      x2: axisBounds.x + axisBounds.width,
-      y1: position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height,
-      y2: position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height
-    }))]
-  }));
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(axisBounds.x, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height, axisBounds.x + axisBounds.width, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(ChartText, {
+      horizontalAlignment: "center",
+      verticalAlignment: "middle",
+      x: labelX,
+      y: labelY,
+      children: label
+    })]
+  });
 });

package/esm/chart/axis/YAxis.js

@@ -1,17 +1,19 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "width", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval"];
-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); }
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width"];
 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 { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { G, Line } from 'react-native-svg';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group, vec } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { ReferenceLine } from '../line/ReferenceLine';
-import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
-import { getAxisTicksData, isCategoricalScale } from '../utils';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedG = Animated.createAnimatedComponent(G);
+const AXIS_WIDTH = 44;
+const LABEL_SIZE = 20;
 export const YAxis = /*#__PURE__*/memo(_ref => {
   let {
       axisId,
@@ -20,16 +22,19 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount = 5,
       ticks,
       tickLabelFormatter,
-      styles,
-      classNames,
+      TickLabelComponent = DefaultAxisTickLabel,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 8,
-      width = 44,
       minTickLabelGap = 0,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
-      tickInterval
+      tickInterval,
+      label,
+      labelGap = 4,
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -45,17 +50,10 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
-  const gridOpacity = useSharedValue(1);
-  const axisLineProps = useMemo(() => ({
-    stroke: theme.color.fg,
-    strokeLinecap: 'square',
-    strokeWidth: 1
-  }), [theme.color.fg]);
-  const axisTickMarkProps = useMemo(() => ({
-    stroke: theme.color.fg,
-    strokeLinecap: 'square',
-    strokeWidth: 1
-  }), [theme.color.fg]);
+
+  // Note: gridOpacity not currently used in Skia version
+  // const gridOpacity = useSharedValue(1);
+
   useEffect(() => {
     registerAxis(registrationId, position, width);
     return () => unregisterAxis(registrationId);
@@ -114,57 +112,66 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         y: tick.position,
         label: String(formatTick(tick.tick)),
         chartTextProps: {
-          className: classNames == null ? void 0 : classNames.tickLabel,
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          style: styles == null ? void 0 : styles.tickLabel,
           horizontalAlignment: position === 'left' ? 'right' : 'left'
         }
       };
     });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames == null ? void 0 : classNames.tickLabel, styles == null ? void 0 : styles.tickLabel]);
-  const gridAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: gridOpacity.value
-  }));
-  if (!yScale) return;
-  return /*#__PURE__*/_jsxs(G, _extends({
-    "data-axis": "y",
-    "data-position": position
-  }, props, {
-    children: [showGrid && /*#__PURE__*/_jsx(AnimatedG, {
-      animatedProps: gridAnimatedStyle,
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  if (!yScale || !axisBounds) return;
+  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
+  const labelY = axisBounds.y + axisBounds.height / 2;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
       children: ticksData.map((tick, index) => {
         const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
           LineComponent: GridLineComponent,
           dataY: tick.tick,
           yAxisId: axisId
         });
-        return /*#__PURE__*/_jsx(G, {
+        return /*#__PURE__*/_jsx(Group, {
           children: horizontalLine
         }, "grid-" + tick.tick + "-" + index);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
       labels: chartTextData,
       minGap: minTickLabelGap
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(G, {
-      "data-testid": "tick-marks",
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: ticksData.map((tick, index) => {
         const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
         const tickMarkSizePixels = tickMarkSize;
         const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
-        return /*#__PURE__*/_jsx(Line, _extends({}, axisTickMarkProps, {
-          x1: tickX,
-          x2: tickX2,
-          y1: tick.position,
-          y2: tick.position
-        }), "tick-mark-" + tick.tick + "-" + index);
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, "tick-mark-" + tick.tick + "-" + index);
+      })
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(Group, {
+      origin: vec(labelX, labelY),
+      transform: [{
+        rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
+      }],
+      children: /*#__PURE__*/_jsx(ChartText, {
+        horizontalAlignment: "center",
+        verticalAlignment: "middle",
+        x: labelX,
+        y: labelY,
+        children: label
       })
-    }), axisBounds && showLine && /*#__PURE__*/_jsx(Line, _extends({}, axisLineProps, {
-      x1: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      x2: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      y1: axisBounds.y,
-      y2: axisBounds.y + axisBounds.height
-    }))]
-  }));
+    })]
+  });
 });

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -118,7 +118,6 @@ const TimeOfDayAxesExample = () => {
   }, [timeData]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
-    curve: "monotone",
     height: defaultChartHeight,
     series: [{
       id: 'lineA',

package/esm/chart/axis/index.js

@@ -1,5 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './Axis';
+export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';
 // codegen:end

package/esm/chart/bar/Bar.js

@@ -31,7 +31,8 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transition
   } = _ref;
   const theme = useTheme();
 
@@ -60,6 +61,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     roundTop: roundTop,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
     width: width,
     x: x,
     y: y