feat: New prop for x-axis label rotation

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

@@ -76,6 +76,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    rotateLabelX,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -182,6 +183,9 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               tickLine={false}
               axisLine={false}
               minTickGap={5}
+              angle={rotateLabelX?.angle}
+              dy={rotateLabelX?.verticalShift}
+              height={rotateLabelX?.xAxisHeight}
             />
             <YAxis
               width={yAxisWidth}

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

@@ -75,6 +75,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     noDataText,
     onValueChange,
     customTooltip,
+    rotateLabelX,
     className,
     enableLegendSlider = false,
     ...other
@@ -177,6 +178,9 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 )}
                 tickLine={false}
                 axisLine={false}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             ) : (
               <XAxis
@@ -199,6 +203,9 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 tickFormatter={valueFormatter}
                 minTickGap={5}
                 allowDecimals={allowDecimals}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             )}
             {layout !== "vertical" ? (

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

@@ -71,6 +71,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    rotateLabelX,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -178,6 +179,9 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               tickLine={false}
               axisLine={false}
               minTickGap={5}
+              angle={rotateLabelX?.angle}
+              dy={rotateLabelX?.verticalShift}
+              height={rotateLabelX?.xAxisHeight}
             />
             <YAxis
               width={yAxisWidth}

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

@@ -74,6 +74,11 @@ export interface ScatterChartProps
   enableLegendSlider?: boolean;
   onValueChange?: (value: EventProps) => void;
   customTooltip?: React.ComponentType<CustomTooltipType>;
+  rotateLabelX?: {
+    angle: number;
+    verticalShift: number;
+    xAxisHeight: number;
+  };
 }
 
 const renderShape = (props: any, activeNode: any | undefined, activeLegend: string | undefined) => {
@@ -130,6 +135,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     noDataText,
     onValueChange,
     customTooltip,
+    rotateLabelX,
     className,
     enableLegendSlider = false,
     ...other
@@ -235,6 +241,9 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 minTickGap={5}
                 domain={xAxisDomain as AxisDomain}
                 allowDataOverflow={true}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             ) : null}
             {y ? (

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

@@ -35,6 +35,11 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   onValueChange?: (value: EventProps) => void;
   enableLegendSlider?: boolean;
   customTooltip?: React.ComponentType<CustomTooltipType>;
+  rotateLabelX?: {
+    angle: number;
+    verticalShift: number;
+    xAxisHeight: number;
+  };
 }
 
 export default BaseChartProps;

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

@@ -171,6 +171,13 @@ export const MultipleZeroValues: Story = {
   },
 };
 
+export const RotateXLabels: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 export const WithoutLegendScroll: Story = {
   args: { enableLegendSlider: false },
 };

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

@@ -167,6 +167,21 @@ export const MultipleZeroValues: Story = {
   },
 };
 
+export const RotateXLabelsHorizontal: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
+export const RotateXLabelVertical: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+    layout: "vertical",
+  },
+};
+
 //Custom tooltips
 const customTooltipColors: Color[] = ["cyan"];
 const customTooltipIndex = "month";

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

@@ -141,6 +141,13 @@ export const LongIndexNameAndPreserveStartEnd: Story = {
   args: { data: longIndexBaseChartData, intervalType: "preserveStartEnd" },
 };
 
+export const RotateXLabels: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 //Custom tooltips
 const customTooltipColors: Color[] = ["cyan"];
 const customTooltipIndex = "month";

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

@@ -126,6 +126,12 @@ export const MultipleZeroValues: Story = {
   },
 };
 
+export const RotateXLabel: Story = {
+  args: {
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 //Custom tooltips
 const customTooltipColors: Color[] = ["red", "green", "blue", "yellow"];
 const customTooltipIndex = "location";