@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

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

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { memo, useCallback, useMemo } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine } from '../../line';
 import { Line } from '../../line/Line';
@@ -52,10 +53,14 @@ const Simple = () => {
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
+  const chartAccessibilityLabel = "Page views and unique visitors across " + pageNames.length + " pages. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => pageNames[index] + ": " + pageViews[index] + " views, " + pageUniqueVisitors[index] + " unique visitors", [pageNames, pageViews, pageUniqueVisitors]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     inset: 32,
     series: [{
@@ -96,8 +101,8 @@ const Simple = () => {
 };
 const TimeOfDayAxesExample = () => {
   const theme = useTheme();
-  const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
-  const lineB = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+  const lineA = useMemo(() => [5, 5, 10, 90, 85, 70, 30, 25, 25], []);
+  const lineB = useMemo(() => [90, 85, 70, 25, 23, 40, 45, 40, 50], []);
   const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
   const dateFormatter = useCallback(index => {
     return new Date(timeData[index]).toLocaleDateString('en-US', {
@@ -116,8 +121,12 @@ const TimeOfDayAxesExample = () => {
   const dateTicks = useMemo(() => {
     return timeData.map((d, index) => index).filter(d => d % 2 === 0);
   }, [timeData]);
+  const chartAccessibilityLabel = "Chart with " + lineA.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": lineA " + lineA[index] + ", lineB " + lineB[index], [lineA, lineB]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'lineA',
@@ -149,58 +158,166 @@ const TimeOfDayAxesExample = () => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
-const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
-  enableScrubbing: true,
-  height: defaultChartHeight,
-  series: [{
-    id: 'linear',
-    yAxisId: 'linearAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'linear'
-  }, {
-    id: 'log',
-    yAxisId: 'logAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'log'
-  }],
-  xAxis: {
-    data: [1, 10, 30, 50, 70, 90, 100]
-  },
-  yAxis: [{
-    id: 'linearAxis',
-    scaleType: 'linear'
-  }, {
-    id: 'logAxis',
-    scaleType: 'log'
-  }],
-  children: [/*#__PURE__*/_jsx(XAxis, {
-    showLine: true,
-    showTickMarks: true
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "logAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "linearAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "linear"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "log"
-  }), /*#__PURE__*/_jsx(Scrubber, {})]
-});
+const multipleYAxesData = [1, 10, 30, 50, 70, 90, 100];
+const MultipleYAxesExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": linear " + multipleYAxesData[index] + ", log " + multipleYAxesData[index], []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with linear and log axes. 7 data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: multipleYAxesData,
+      label: 'linear'
+    }, {
+      id: 'log',
+      yAxisId: 'logAxis',
+      data: multipleYAxesData,
+      label: 'log'
+    }],
+    xAxis: {
+      data: multipleYAxesData
+    },
+    yAxis: [{
+      id: 'linearAxis',
+      scaleType: 'linear'
+    }, {
+      id: 'logAxis',
+      scaleType: 'log'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "logAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linearAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "linear"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "log"
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+const AxesOnAllSides = () => {
+  const theme = useTheme();
+  const data = [30, 45, 60, 80, 55, 40, 65];
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: labels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Bottom Axis",
+      position: "bottom",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Top Axis",
+      position: "top",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Left Axis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Right Axis",
+      position: "right"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "data"
+    })]
+  });
+};
+const CustomTickMarkSizes = () => {
+  const theme = useTheme();
+  const data = [25, 50, 75, 60, 45, 80, 35];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 300,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldGreen
+    }],
+    xAxis: {
+      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=4 (default)",
+      tickMarkSize: 4
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      height: 60,
+      label: "tickMarkSize=8",
+      position: "top",
+      tickMarkSize: 8
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=16",
+      position: "left",
+      tickMarkSize: 16,
+      width: 76
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=24",
+      position: "right",
+      tickMarkSize: 24,
+      width: 84
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "monotone",
+      seriesId: "data"
+    })]
+  });
+};
 const DomainLimitType = _ref => {
   let {
     limit
   } = _ref;
-  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
+  const exponentialData = useMemo(() => [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + exponentialData[index], [exponentialData]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Exponential growth chart with " + exponentialData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'growthLinear',
@@ -249,6 +366,97 @@ const DomainLimitType = _ref => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
+
+// Band scale with tick filtering - show every other tick
+const BandScaleTickFiltering = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22, 35, 42, 18, 55, 67]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={(i) => i % 2 === 0}",
+    ticks: i => i % 2 === 0
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Band scale with explicit ticks array
+const BandScaleExplicitTicks = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={[0, 3, 6]} (first, middle, last)",
+    ticks: [0, 3, 6]
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Line chart on band scale - comparing grid placements
+const LineChartOnBandScale = _ref2 => {
+  let {
+    bandGridLinePlacement
+  } = _ref2;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 180,
+    inset: 8,
+    series: [{
+      id: 'line1',
+      data: [10, 22, 29, 45, 98, 45, 22],
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      bandGridLinePlacement: bandGridLinePlacement,
+      bandTickMarkPlacement: bandGridLinePlacement,
+      label: "bandGridLinePlacement: " + bandGridLinePlacement
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
 const AxisStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -270,6 +478,74 @@ const AxisStories = () => {
       children: /*#__PURE__*/_jsx(DomainLimitType, {
         limit: "nice"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Axis Grid Alignment",
+      children: /*#__PURE__*/_jsxs(CartesianChart, {
+        height: 350,
+        inset: 8,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22]
+        }],
+        xAxis: {
+          scaleType: 'band',
+          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+        yAxis: {
+          domain: {
+            min: 0
+          }
+        },
+        children: [/*#__PURE__*/_jsx(XAxis, {
+          showGrid: true,
+          showLine: true,
+          showTickMarks: true,
+          label: "Default"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "start",
+          label: "Start"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "end",
+          label: "End"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "middle",
+          label: "Middle"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "edges",
+          label: "Edges"
+        }), /*#__PURE__*/_jsx(BarPlot, {})]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Tick Filtering",
+      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Explicit Ticks",
+      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Line Chart on Band Scale - Grid Positions",
+      children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "edges"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "start"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "middle"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "end"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axes on All Sides",
+      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tick Mark Sizes",
+      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
     })]
   });
 };

package/esm/chart/bar/Bar.js

@@ -1,5 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
 import { DefaultBar } from './DefaultBar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,9 +22,10 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    originY,
+    origin: originProp,
     dataX,
     dataY,
+    seriesId,
     BarComponent = DefaultBar,
     fill,
     fillOpacity = 1,
@@ -32,36 +34,36 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    minSize,
+    transitions,
     transition
   } = _ref;
   const theme = useTheme();
-
-  // Use theme color as default if no fill is provided
-  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
-  const borderRadiusPixels = useMemo(() => borderRadius != null ? borderRadius : 0, [borderRadius]);
+  const {
+    layout
+  } = useCartesianChartContext();
   const barPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadiusPixels, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadiusPixels, roundTop, roundBottom]);
-  const effectiveOriginY = originY != null ? originY : y + height;
-  if (!barPath) {
-    return null;
-  }
-
-  // Always use the BarComponent for rendering
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => originProp != null ? originProp : layout === 'horizontal' ? x : y + height, [originProp, layout, x, y, height]);
+  if (!barPath) return;
   return /*#__PURE__*/_jsx(BarComponent, {
     borderRadius: borderRadius,
     d: barPath,
     dataX: dataX,
     dataY: dataY,
-    fill: effectiveFill,
+    fill: fill != null ? fill : theme.color.fgPrimary,
     fillOpacity: fillOpacity,
     height: height,
-    originY: effectiveOriginY,
+    minSize: minSize,
+    origin: origin,
     roundBottom: roundBottom,
     roundTop: roundTop,
+    seriesId: seriesId,
     stroke: stroke,
     strokeWidth: strokeWidth,
     transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,17 +1,17 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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 { forwardRef, memo, useMemo } from 'react';
 import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
-import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { defaultStackId } from '../utils';
 import { BarPlot } from './BarPlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      series,
+      series: seriesProp,
       stacked,
       showXAxis,
       showYAxis,
@@ -30,24 +30,23 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackGap,
       barMinSize,
       stackMinSize,
+      transitions,
       transition
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-  const transformedSeries = useMemo(() => {
-    if (!stacked || !series) return series;
-    return series.map(s => {
+  const series = useMemo(() => {
+    if (!stacked || !seriesProp) return seriesProp;
+    return seriesProp.map(s => {
       var _s$stackId;
       return _extends({}, s, {
         stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
       });
     });
-  }, [series, stacked]);
-
-  // Unlike other charts with custom props per series, we do not need to pick out
-  // the props from each series that shouldn't be passed to CartesianChart
-  const seriesToRender = transformedSeries != null ? transformedSeries : series;
-  const seriesIds = seriesToRender == null ? void 0 : seriesToRender.map(s => s.id);
+  }, [seriesProp, stacked]);
+  const seriesIds = useMemo(() => series == null ? void 0 : series.map(s => s.id), [series]);
+  const isHorizontalLayout = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontalLayout ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontalLayout ? 'band' : 'linear';
 
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
@@ -57,7 +56,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -71,14 +71,6 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const xAxisConfig = {
-    scaleType: xScaleType != null ? xScaleType : 'band',
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange
-  };
   const hasNegativeValues = useMemo(() => {
     if (!series) return false;
     return series.some(s => {
@@ -86,25 +78,37 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       return (_s$data = s.data) == null ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
     });
   }, [series]);
+  const xAxisConfig = useMemo(() => ({
+    scaleType: xScaleType != null ? xScaleType : defaultXScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: isHorizontalLayout && !hasNegativeValues ? _extends({
+      min: 0
+    }, xDomain) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontalLayout, hasNegativeValues, xDomain, xDomainLimit, xRange]);
 
-  // Set default min domain to 0 for area chart, but only if there are no negative values
-  const yAxisConfig = {
-    scaleType: yScaleType,
+  // Set default min domain to 0 for bar chart, but only if there are no negative values.
+  const yAxisConfig = useMemo(() => ({
+    scaleType: yScaleType != null ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: hasNegativeValues ? yDomain : _extends({
+    domain: !isHorizontalLayout && !hasNegativeValues ? _extends({
       min: 0
-    }, yDomain),
+    }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  };
+  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontalLayout, hasNegativeValues, yDomain, yDomainLimit, yRange]);
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
-    inset: calculatedInset,
-    series: seriesToRender,
+    inset: inset,
+    series: series,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
       axisId: yAxisId
     }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
       BarComponent: BarComponent,
@@ -119,7 +123,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackMinSize: stackMinSize,
       stroke: stroke,
       strokeWidth: strokeWidth,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));