add no gridlines

tremorlabs · May 17, 2024 · cb25af5 · cb25af5
1 parent dfcab08
commit cb25af5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx
@@ -477,6 +477,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   startEndOnly?: boolean
   showXAxis?: boolean
   showYAxis?: boolean
+  showGridLines?: boolean
   yAxisWidth?: number
   intervalType?: "preserveStartEnd" | "equidistantPreserveStart"
   showTooltip?: boolean
@@ -504,6 +505,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
       startEndOnly = false,
       showXAxis = true,
       showYAxis = true,
+      showGridLines = true,
       yAxisWidth = 56,
       intervalType = "equidistantPreserveStart",
       showTooltip = true,
@@ -603,11 +605,13 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
               top: 0,
             }}
           >
-            <CartesianGrid
-              className={cx("stroke-gray-200 stroke-1 dark:stroke-gray-800")}
-              horizontal={true}
-              vertical={false}
-            />
+            {showGridLines ? (
+              <CartesianGrid
+                className={cx("stroke-gray-200 stroke-1 dark:stroke-gray-800")}
+                horizontal={true}
+                vertical={false}
+              />
+            ) : null}
             <XAxis
               padding={{ left: paddingValue, right: paddingValue }}
               hide={!showXAxis}

diff --git a/src/components/LineChart/linechart.stories.tsx b/src/components/LineChart/linechart.stories.tsx
@@ -258,6 +258,12 @@ export const WithNoAxis: Story = {
   },
 }
 
+export const WithNoGridlines: Story = {
+  args: {
+    showGridLines: false,
+  },
+}
+
 export const WithNoLegend: Story = {
   args: {
     showLegend: false,