[APM] X-axis ticks overlap on small screen sizes

[sorenlouv]

What
On smaller screen size (13" and below) the x-axis tick marks overlap which makes them unreadable. This happens when the time range is set to 7 days or above.

How
#48355 added support for better timezone display but also changed the behaviour of x-axis tick marks. Previously the number of tick marks was dynamic (introduced in #44870) but after #48355 it became static due to the prop tickValues={xTickValues} which made tickTotal redundant:

.

Suggestion

Currently xTickValues are declared in

kibana/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js

Lines 78 to 86 in 583500e

	const xTickValues = d3.time.scale
	.utc()
	.domain([xMinZone, xMaxZone])
	.range([0, width])
	.ticks()
	.map(x => {
	const time = x.getTime();
	return new Date(time + getTimezoneOffsetInMs(time));
	});

. By providing an argument to ticks() we can control the number of ticks.

const getXTickValues = numberOfTicks => d3.time.scale
    .utc()
    .domain([xMinZone, xMaxZone])
    .range([0, width])
    .ticks(numberOfTicks) // <----- this
    .map(x => {
      const time = x.getTime();
      return new Date(time + getTimezoneOffsetInMs(time));
    });

and instead of
https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js#L172-L178

const tickValues = getXTickValues(xTickTotal);

<XAxis
    type="time-utc"
    tickSize={0}
    tickFormat={tickFormatX}
    tickValues={tickValues}
/>

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)