feat: tickGap (#890)

* Added min tick gap prop
tremorlabs · Jan 7, 2024 · 66577db · 66577db
1 parent 82445b5
commit 66577db
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -77,6 +77,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     enableLegendSlider = false,
     customTooltip,
     rotateLabelX,
+    tickGap = 5,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -182,7 +183,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
               tickLine={false}
               axisLine={false}
-              minTickGap={5}
+              minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
               height={rotateLabelX?.xAxisHeight}

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -88,10 +88,11 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     allowDecimals = true,
     noDataText,
     onValueChange,
+    enableLegendSlider = false,
     customTooltip,
     rotateLabelX,
+    tickGap = 5,
     className,
-    enableLegendSlider = false,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -195,6 +196,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 angle={rotateLabelX?.angle}
                 dy={rotateLabelX?.verticalShift}
                 height={rotateLabelX?.xAxisHeight}
+                minTickGap={tickGap}
               />
             ) : (
               <XAxis
@@ -215,7 +217,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 tickLine={false}
                 axisLine={false}
                 tickFormatter={valueFormatter}
-                minTickGap={5}
+                minTickGap={tickGap}
                 allowDecimals={allowDecimals}
                 angle={rotateLabelX?.angle}
                 dy={rotateLabelX?.verticalShift}

diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -72,6 +72,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     enableLegendSlider = false,
     customTooltip,
     rotateLabelX,
+    tickGap = 5,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -178,7 +179,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               )}
               tickLine={false}
               axisLine={false}
-              minTickGap={5}
+              minTickGap={tickGap}
               angle={rotateLabelX?.angle}
               dy={rotateLabelX?.verticalShift}
               height={rotateLabelX?.xAxisHeight}

diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -79,6 +79,7 @@ export interface ScatterChartProps
     verticalShift: number;
     xAxisHeight: number;
   };
+  tickGap?: number;
 }
 
 const renderShape = (props: any, activeNode: any | undefined, activeLegend: string | undefined) => {
@@ -138,6 +139,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     rotateLabelX,
     className,
     enableLegendSlider = false,
+    tickGap = 5,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -238,7 +240,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 tickLine={false}
                 tickFormatter={valueFormatter.x}
                 axisLine={false}
-                minTickGap={5}
+                minTickGap={tickGap}
                 domain={xAxisDomain as AxisDomain}
                 allowDataOverflow={true}
                 angle={rotateLabelX?.angle}

diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -40,6 +40,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
     verticalShift?: number;
     xAxisHeight?: number;
   };
+  tickGap?: number;
 }
 
 export default BaseChartProps;