feat: x-axis padding prop

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)" }}

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}

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}

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;
 }
 

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 },
+  },
+};

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 },
+  },
+};

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 },
+  },
+};