diff --git a/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap
index 1e1cb3f..c9afd56 100644
--- a/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap
+++ b/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     data-testid="ez-bar"
                     fill="red"
                     height="100.00000000000001"
-                    width="0"
+                    width="250"
                     x="0"
                     y="275"
                   >
@@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     data-testid="ez-bar"
                     fill="green"
                     height="100.00000000000001"
-                    width="250"
+                    width="375"
                     x="0"
                     y="25"
                   >
@@ -75,7 +75,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    50
+                    0
                   </text>
                 </g>
                 <g
@@ -95,7 +95,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    55
+                    10
                   </text>
                 </g>
                 <g
@@ -115,7 +115,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    60
+                    20
                   </text>
                 </g>
                 <g
@@ -135,7 +135,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    65
+                    30
                   </text>
                 </g>
                 <g
@@ -155,7 +155,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    70
+                    40
                   </text>
                 </g>
                 <g
@@ -175,7 +175,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    75
+                    50
                   </text>
                 </g>
                 <g
@@ -195,7 +195,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    80
+                    60
                   </text>
                 </g>
                 <g
@@ -215,7 +215,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    85
+                    70
                   </text>
                 </g>
                 <g
@@ -235,7 +235,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    90
+                    80
                   </text>
                 </g>
                 <g
@@ -255,7 +255,7 @@ exports[`BarChart renders a bar chart 1`] = `
                     transform="translate(0, 0) rotate(0 0 0)"
                     y="9"
                   >
-                    95
+                    90
                   </text>
                 </g>
                 <g
diff --git a/packages/ez-react/src/recipes/bar/BarChart.stories.tsx b/packages/ez-react/src/recipes/bar/BarChart.stories.tsx
index 3dad215..d13960d 100644
--- a/packages/ez-react/src/recipes/bar/BarChart.stories.tsx
+++ b/packages/ez-react/src/recipes/bar/BarChart.stories.tsx
@@ -43,15 +43,17 @@ const TemplateWithParentDimensions: Story<BarChartProps> = (args) => {
   );
 };
 
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
+// By passing using the Args format for exported stories,
+// you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/vue/workflows/unit-testing
+export const Resizable = TemplateWithParentDimensions.bind({});
+
 const initialArguments = {
   colors,
   grid: { directions: [] },
   xAxis: {
     domainKey: 'value',
     title: 'Count',
-    nice: 2,
   },
   yAxis: {
     domainKey: 'name',
@@ -66,5 +68,4 @@ Default.args = {
   dimensions,
 };
 
-export const Resizable = TemplateWithParentDimensions.bind({});
 Resizable.args = initialArguments;
diff --git a/packages/ez-react/src/recipes/bar/BarChart.tsx b/packages/ez-react/src/recipes/bar/BarChart.tsx
index 65ff00b..456e31c 100644
--- a/packages/ez-react/src/recipes/bar/BarChart.tsx
+++ b/packages/ez-react/src/recipes/bar/BarChart.tsx
@@ -10,6 +10,7 @@ import {
   Position,
   RawData,
 } from 'eazychart-core/src/types';
+import { getDomainByKeys } from 'eazychart-core/src/utils';
 import { Axis } from '@/components/scales/Axis';
 import { Chart } from '@/components/Chart';
 import { Bars } from '@/components/Bars';
@@ -75,6 +76,11 @@ export const BarChart: FC<BarChartProps> = ({
     colors
   );
 
+  const [, xAxisDomainMaxValue] = getDomainByKeys(
+    [xAxis.domainKey],
+    activeData
+  );
+
   return (
     <Chart
       dimensions={dimensions}
@@ -93,6 +99,7 @@ export const BarChart: FC<BarChartProps> = ({
             domainKey: xAxis.domainKey,
             nice: xAxis.nice || 0,
             reverse: isRTL,
+            domain: [0, xAxisDomainMaxValue],
           },
         }}
         yScaleConfig={{
diff --git a/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx b/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx
index 65a2248..4ff649b 100644
--- a/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx
+++ b/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx
@@ -5,7 +5,6 @@ import {
   ResizableChartWrapper,
 } from '@/lib/storybook-utils';
 import {
-  animationOptions,
   colors,
   dimensions,
   rawData,
@@ -50,7 +49,6 @@ const TemplateWithParentDimensions: Story = (_args, { argTypes }) => ({
 // By passing using the Args format for exported stories,
 // you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/vue/workflows/unit-testing
-export const Default = DefaultTemplate.bind({});
 export const Resizable = TemplateWithParentDimensions.bind({});
 
 const initialArguments = {
@@ -59,23 +57,15 @@ const initialArguments = {
   xAxis: {
     domainKey: 'value',
     title: 'Count',
-    nice: 2,
   },
   yAxis: {
     domainKey: 'name',
     title: 'Letter',
   },
-  padding: {
-    left: 150,
-    bottom: 100,
-    right: 150,
-    top: 100,
-  },
-  animationOptions,
-  isRTL: false,
   data: rawData,
 };
 
+export const Default = DefaultTemplate.bind({});
 Default.args = {
   ...initialArguments,
   dimensions,
diff --git a/packages/ez-vue/src/recipes/bar/BarChart.tsx b/packages/ez-vue/src/recipes/bar/BarChart.tsx
index ea5ef7f..fa84657 100644
--- a/packages/ez-vue/src/recipes/bar/BarChart.tsx
+++ b/packages/ez-vue/src/recipes/bar/BarChart.tsx
@@ -11,7 +11,7 @@ import {
   Dimensions,
 } from 'eazychart-core/src/types';
 import { Prop } from 'vue-property-decorator';
-import { ScaleBand, ScaleLinear } from 'eazychart-core/src';
+import { getDomainByKeys, ScaleBand, ScaleLinear } from 'eazychart-core/src';
 import Chart from '@/components/Chart';
 import Axis from '@/components/scales/Axis';
 import Legend from '@/components/addons/legend/Legend';
@@ -155,6 +155,8 @@ export default class BarChart extends mixins(ToggleDatumMixin) {
       Tooltip: $scopedSlots.Tooltip,
     };
 
+    const [, xAxisDomainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData);
+
     return (
       <Chart
         dimensions={dimensions}
@@ -172,6 +174,7 @@ export default class BarChart extends mixins(ToggleDatumMixin) {
               domainKey: xAxis.domainKey,
               nice: xAxis.nice || 0,
               reverse: isRTL,
+              domain: [0, xAxisDomainMaxValue],
             },
           }}
           yScaleConfig={{