From 85a6496268fd2d7e65fe7dd6ff822a19cb6116ed Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Fri, 20 Nov 2020 14:58:45 +0100
Subject: [PATCH] [7.x] [Uptime]Reduce chart height on monitor detail page
 (#83777) (#83908)

* reduce chart height

* update
---
 .../uptime/public/components/common/charts/duration_chart.tsx  | 3 ++-
 .../uptime/public/components/monitor/monitor_charts.tsx        | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx
index 35335f9868978..5195eef6e9a3b 100644
--- a/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx
+++ b/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx
@@ -27,6 +27,7 @@ import { ChartEmptyState } from './chart_empty_state';
 import { DurationAnomaliesBar } from './duration_line_bar_list';
 import { AnomalyRecords } from '../../../state/actions';
 import { UptimeThemeContext } from '../../../contexts';
+import { MONITOR_CHART_HEIGHT } from '../../monitor';
 
 interface DurationChartProps {
   /**
@@ -86,7 +87,7 @@ export const DurationChartComponent = ({
   };
 
   return (
-    <ChartWrapper height="400px" loading={loading}>
+    <ChartWrapper height={MONITOR_CHART_HEIGHT} loading={loading}>
       {hasLines ? (
         <Chart>
           <Settings
diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx
index 552c2e587e3d3..1eeaebc448d64 100644
--- a/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/monitor_charts.tsx
@@ -12,6 +12,7 @@ import { MonitorDuration } from './monitor_duration/monitor_duration_container';
 interface MonitorChartsProps {
   monitorId: string;
 }
+export const MONITOR_CHART_HEIGHT = '248px';
 
 export const MonitorCharts = ({ monitorId }: MonitorChartsProps) => {
   return (
@@ -20,7 +21,7 @@ export const MonitorCharts = ({ monitorId }: MonitorChartsProps) => {
         <MonitorDuration monitorId={monitorId} />
       </EuiFlexItem>
       <EuiFlexItem>
-        <PingHistogram height="400px" isResponsive={false} />
+        <PingHistogram height={MONITOR_CHART_HEIGHT} isResponsive={false} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );