From 7c9e08e269adb355377aa3795cc04e097ec22c2a Mon Sep 17 00:00:00 2001
From: Angela Chuang <6295984+angorayc@users.noreply.github.com>
Date: Thu, 4 Mar 2021 22:59:38 +0000
Subject: [PATCH] styling (#93663)

---
 .../common/components/charts/areachart.tsx    | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
index 53f613821196d..9a00736c4a605 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
@@ -62,6 +62,15 @@ const checkIfAnyValidSeriesExist = (
 ): data is ChartSeriesData[] =>
   Array.isArray(data) && data.some(checkIfAllTheDataInTheSeriesAreValid);
 
+const axisStyle = {
+  tickLine: {
+    visible: false,
+  },
+  tickLabel: {
+    padding: 3,
+  },
+};
+
 // https://ela.st/multi-areaseries
 export const AreaChartBaseComponent = ({
   data,
@@ -111,23 +120,10 @@ export const AreaChartBaseComponent = ({
           position={Position.Bottom}
           showOverlappingTicks={false}
           tickFormat={xTickFormatter}
-          style={{
-            tickLine: {
-              visible: false,
-            },
-          }}
+          style={axisStyle}
         />
 
-        <Axis
-          id={yAxisId}
-          position={Position.Left}
-          style={{
-            tickLine: {
-              visible: false,
-            },
-          }}
-          tickFormat={yTickFormatter}
-        />
+        <Axis id={yAxisId} position={Position.Left} style={axisStyle} tickFormat={yTickFormatter} />
       </Chart>
     </div>
   ) : null;