From 3ec9fdb9955966f11b4138b8a315eeb8471a6d94 Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Tue, 19 Nov 2019 17:11:30 +0100
Subject: [PATCH] [APM] Set no of ticks based on available width for chart
 (#50904)

Closes #50888.
---
 .../components/shared/charts/CustomPlot/StaticPlot.js      | 7 +------
 .../components/shared/charts/CustomPlot/plotUtils.js       | 6 +++++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js
index dd95a0a3db12d..0e44bafa0c2a6 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js
@@ -158,13 +158,9 @@ class StaticPlot extends PureComponent {
   };
 
   render() {
-    const { width, series, tickFormatY, plotValues, noHits } = this.props;
+    const { series, tickFormatY, plotValues, noHits } = this.props;
     const { xTickValues, yTickValues } = plotValues;
 
-    // approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px
-    // d3 will determine the exact number of ticks based on the selected range
-    const xTickTotal = Math.floor(width / 100);
-
     const tickFormatX = this.props.tickFormatX || this.tickFormatXTime;
 
     return (
@@ -172,7 +168,6 @@ class StaticPlot extends PureComponent {
         <XAxis
           type="time-utc"
           tickSize={0}
-          tickTotal={xTickTotal}
           tickFormat={tickFormatX}
           tickValues={xTickValues}
         />
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js
index 7923ae25c22a3..4186f6c899750 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js
@@ -75,11 +75,15 @@ export function getPlotValues(
   const yMaxNice = yScale.domain()[1];
   const yTickValues = [0, yMaxNice / 2, yMaxNice];
 
+  // approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px
+  // d3 will determine the exact number of ticks based on the selected range
+  const xTickTotal = Math.floor(width / 100);
+
   const xTickValues = d3.time.scale
     .utc()
     .domain([xMinZone, xMaxZone])
     .range([0, width])
-    .ticks()
+    .ticks(xTickTotal)
     .map(x => {
       const time = x.getTime();
       return new Date(time + getTimezoneOffsetInMs(time));