diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 57426b02..b863106d 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -80,11 +80,18 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
+    xAxisPadding,
     yAxisLabel,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
+
+  const defaultPadding: number =
+    (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
@@ -174,7 +181,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               />
             ) : null}
             <XAxis
-              padding={{ left: paddingValue, right: paddingValue }}
+              padding={paddingValue}
               hide={!showXAxis}
               dataKey={index}
               tick={{ transform: "translate(0, 6)" }}
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
index c87df34b..25eab00e 100644
--- a/src/components/chart-elements/BarChart/BarChart.tsx
+++ b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -96,12 +96,17 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     barCategoryGap,
     tickGap = 5,
     xAxisLabel,
+    xAxisPadding,
     yAxisLabel,
     className,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  const defaultPadding: number = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const categoryColors = constructCategoryColors(categories, colors);
   const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);
@@ -187,7 +192,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
 
             {layout !== "vertical" ? (
               <XAxis
-                padding={{ left: paddingValue, right: paddingValue }}
+                padding={paddingValue}
                 hide={!showXAxis}
                 dataKey={index}
                 interval={startEndOnly ? "preserveStartEnd" : intervalType}
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
index ded14f8d..5b63bc91 100644
--- a/src/components/chart-elements/LineChart/LineChart.tsx
+++ b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -76,10 +76,15 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     tickGap = 5,
     xAxisLabel,
     yAxisLabel,
+    xAxisPadding,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
-  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  const defaultPadding: number = !showXAxis && !showYAxis ? 0 : 20;
+  const paddingValue: Required<typeof xAxisPadding> = {
+    left: xAxisPadding?.left ?? defaultPadding,
+    right: xAxisPadding?.right ?? defaultPadding,
+  };
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
@@ -170,7 +175,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               />
             ) : null}
             <XAxis
-              padding={{ left: paddingValue, right: paddingValue }}
+              padding={paddingValue}
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
index a08969f5..eb0cea4e 100644
--- a/src/components/chart-elements/common/BaseChartProps.tsx
+++ b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -42,6 +42,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   };
   tickGap?: number;
   xAxisLabel?: string;
+  xAxisPadding?: { left?: number; right?: number };
   yAxisLabel?: string;
 }
 
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index db57ce06..7427a114 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -364,3 +364,15 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
+  },
+};
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 664925dc..41005d2e 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -387,3 +387,15 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
+  },
+};
diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
index 11cea258..c854a5ef 100644
--- a/src/stories/chart-elements/LineChart.stories.tsx
+++ b/src/stories/chart-elements/LineChart.stories.tsx
@@ -324,3 +324,15 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0, right: 0 },
+  },
+};
+
+export const xAxisNoLeftPadding: Story = {
+  args: {
+    xAxisPadding: { left: 0 },
+  },
+};