feat: x-axis padding prop

Author: alexbalonperin

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -80,11 +80,13 @@ 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 paddingValue =
+    xAxisPadding ?? ((!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);

src/components/chart-elements/BarChart/BarChart.tsx

@@ -96,12 +96,13 @@ 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 paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const categoryColors = constructCategoryColors(categories, colors);
   const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);

src/components/chart-elements/LineChart/LineChart.tsx

@@ -76,10 +76,11 @@ 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 paddingValue = xAxisPadding ?? (!showXAxis && !showYAxis ? 0 : 20);
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);

src/components/chart-elements/common/BaseChartProps.tsx

@@ -42,6 +42,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   };
   tickGap?: number;
   xAxisLabel?: string;
+  xAxisPadding?: number;
   yAxisLabel?: string;
 }
 

src/stories/chart-elements/AreaChart.stories.tsx

@@ -364,3 +364,9 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};

src/stories/chart-elements/BarChart.stories.tsx

@@ -387,3 +387,9 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};

src/stories/chart-elements/LineChart.stories.tsx

@@ -324,3 +324,9 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const xAxisNoPadding: Story = {
+  args: {
+    xAxisPadding: 0,
+  },
+};