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 57e83ef62c44b..5a1cdc185ac4f 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
@@ -27,8 +27,6 @@ import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue
 // see https://github.com/uber/react-vis/issues/1214
 const getNull = d => isValidCoordinateValue(d.y) && !isNaN(d.y);
 
-const X_TICK_TOTAL = 7;
-
 class StaticPlot extends PureComponent {
   getVisSeries(series, plotValues) {
     return series
@@ -141,12 +139,23 @@ class StaticPlot extends PureComponent {
   }
 
   render() {
-    const { series, tickFormatX, tickFormatY, plotValues, noHits } = this.props;
+    const {
+      width,
+      series,
+      tickFormatX,
+      tickFormatY,
+      plotValues,
+      noHits
+    } = this.props;
     const { 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);
+
     return (
       <SharedPlot plotValues={plotValues}>
-        <XAxis tickSize={0} tickTotal={X_TICK_TOTAL} tickFormat={tickFormatX} />
+        <XAxis tickSize={0} tickTotal={xTickTotal} tickFormat={tickFormatX} />
         {noHits ? (
           <StatusText
             marginLeft={30}
@@ -181,5 +190,6 @@ StaticPlot.propTypes = {
   series: PropTypes.array.isRequired,
   plotValues: PropTypes.object.isRequired,
   tickFormatX: PropTypes.func,
-  tickFormatY: PropTypes.func.isRequired
+  tickFormatY: PropTypes.func.isRequired,
+  width: PropTypes.number.isRequired
 };
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/index.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/index.js
index 7927b55996ad0..e87d60c9b3fe8 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/index.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/index.js
@@ -158,6 +158,7 @@ export class InnerCustomPlot extends PureComponent {
       <Fragment>
         <div style={{ position: 'relative', height: plotValues.XY_HEIGHT }}>
           <StaticPlot
+            width={width}
             noHits={noHits}
             plotValues={plotValues}
             series={enabledSeries}
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
index 76e8d34ca730d..d41d98330c3cd 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
@@ -293,7 +293,7 @@ describe('when response has no data', () => {
         onHover={onHover}
         onMouseLeave={onMouseLeave}
         onSelectionEnd={onSelectionEnd}
-        width={100}
+        width={800}
         tickFormatX={x => x.getTime()} // Avoid timezone issues in snapshots
       />
     );
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
index ad3b3d25fa4c6..aeef8ed995e92 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
@@ -5836,7 +5836,7 @@ Array [
         style={
           Object {
             "height": "256px",
-            "width": "100px",
+            "width": "800px",
           }
         }
       >
@@ -5850,7 +5850,7 @@ Array [
           onMouseLeave={[Function]}
           onMouseMove={[Function]}
           onWheel={[Function]}
-          width={100}
+          width={800}
         >
           <g
             className="rv-xy-plot__axis rv-xy-plot__axis--horizontal "
@@ -5861,7 +5861,7 @@ Array [
               className="rv-xy-plot__axis__line"
               style={Object {}}
               x1={0}
-              x2={20}
+              x2={720}
               y1={0}
               y2={0}
             />
@@ -5895,7 +5895,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(1.6666666666666665, 0)"
+                transform="translate(60, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -5918,7 +5918,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(3.333333333333333, 0)"
+                transform="translate(120, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -5941,7 +5941,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(5, 0)"
+                transform="translate(180, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -5964,7 +5964,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(6.666666666666666, 0)"
+                transform="translate(240, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -5987,7 +5987,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(8.333333333333334, 0)"
+                transform="translate(300, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6010,7 +6010,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(10, 0)"
+                transform="translate(360, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6033,7 +6033,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(11.666666666666668, 0)"
+                transform="translate(420, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6056,7 +6056,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(13.333333333333332, 0)"
+                transform="translate(480, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6079,7 +6079,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(15, 0)"
+                transform="translate(540, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6102,7 +6102,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(16.666666666666668, 0)"
+                transform="translate(600, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6125,7 +6125,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(18.333333333333332, 0)"
+                transform="translate(660, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6148,7 +6148,7 @@ Array [
               <g
                 className="rv-xy-plot__axis__tick"
                 style={Object {}}
-                transform="translate(20, 0)"
+                transform="translate(720, 0)"
               >
                 <line
                   className="rv-xy-plot__axis__tick__line"
@@ -6199,7 +6199,7 @@ Array [
         style={
           Object {
             "height": "256px",
-            "width": "100px",
+            "width": "800px",
           }
         }
       >
@@ -6213,7 +6213,7 @@ Array [
           onMouseLeave={[Function]}
           onMouseMove={[Function]}
           onWheel={[Function]}
-          width={100}
+          width={800}
         />
       </div>
     </div>