fix: add stroke when axis line is on

Upsolve-Labs · Jul 24, 2024 · 40d4bfc · 40d4bfc
1 parent 3b158a1
commit 40d4bfc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -185,7 +185,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               tick={{ transform: "translate(0, 6)" }}
               ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
               fill=""
-              stroke=""
+              stroke={showXAxisLine ? "gray" : ""}
+              strokeOpacity={0.2}
               className={tremorTwMerge(
                 // common
                 "text-tremor-label",
@@ -215,7 +216,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     transform: `translate(${orientations[idx] === "right" ? 3 : -3}, 0)`,
                   }}
                   fill=""
-                  stroke=""
+                  stroke={showYAxisLine ? "gray" : ""}
+                  strokeOpacity={0.2}
                   className={tremorTwMerge(
                     // common
                     "text-tremor-label",
@@ -253,7 +255,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 domain={yAxisDomain as AxisDomain}
                 tick={{ transform: "translate(-3, 0)" }}
                 fill=""
-                stroke=""
+                stroke={showYAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -197,7 +197,8 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 tick={{ transform: "translate(0, 6)" }}
                 ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
                 fill=""
-                stroke=""
+                stroke={showXAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "mt-4 text-tremor-label",
@@ -230,7 +231,8 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 tick={{ transform: "translate(-3, 0)" }}
                 domain={yAxisDomain as AxisDomain}
                 fill=""
-                stroke=""
+                stroke={showXAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",
@@ -269,7 +271,8 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 domain={yAxisDomain as AxisDomain}
                 tick={{ transform: "translate(-3, 0)" }}
                 fill=""
-                stroke=""
+                stroke={showYAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",
@@ -307,7 +310,8 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 interval="preserveStartEnd"
                 tick={{ transform: "translate(0, 6)" }}
                 fill=""
-                stroke=""
+                stroke={showYAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",

diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -182,7 +182,8 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               tick={{ transform: "translate(0, 6)" }}
               ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
               fill=""
-              stroke=""
+              stroke={showXAxisLine ? "gray" : ""}
+              strokeOpacity={0.2}
               className={tremorTwMerge(
                 // common
                 "text-tremor-label",
@@ -211,7 +212,8 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                     transform: `translate(${orientations[idx] === "right" ? 3 : -3}, 0)`,
                   }}
                   fill=""
-                  stroke=""
+                  stroke={showYAxisLine ? "gray" : ""}
+                  strokeOpacity={0.2}
                   className={tremorTwMerge(
                     // common
                     "text-tremor-label",
@@ -249,7 +251,8 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 domain={yAxisDomain as AxisDomain}
                 tick={{ transform: "translate(-3, 0)" }}
                 fill=""
-                stroke=""
+                stroke={showYAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",

diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -245,7 +245,8 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 type="number"
                 name={x}
                 fill=""
-                stroke=""
+                stroke={showXAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",
@@ -288,7 +289,8 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 tick={{ transform: "translate(-3, 0)" }}
                 tickFormatter={valueFormatter.y}
                 fill=""
-                stroke=""
+                stroke={showYAxisLine ? "gray" : ""}
+                strokeOpacity={0.2}
                 className={tremorTwMerge(
                   // common
                   "text-tremor-label",

diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -32,6 +32,15 @@ export const Default: Story = {
   args: {},
 };
 
+export const ShowAxisLines: Story = {
+  args: {
+    showXAxis: true,
+    showXAxisLine: true,
+    showYAxis: true,
+    showYAxisLine: true,
+  },
+};
+
 export const DefaultNegativeValues: Story = {
   args: {
     data: simpleBaseChartWithNegativeValues,