[APM] Decrease amount of tick labels in the transaction graphs

[elasticmachine]

Original comment by @formgeist:

When the viewport is small(er), the amount of tick labels displayed on the x-axis for the transaction graphs (Response times and RPM/TPM) overlap. A quick fix would be simply decrease the amount of labels displayed on the x-axis.

It seems the amount of ticks is determined by the time range selected (split in minutes have more than split in hours etc.). Is this controlled by Kibana for some reason, or can we set a min/max tick label amount in the graphs ourselves?

[elasticmachine]

Original comment by @sqren:

can we set a min/max tick label amount in the graphs ourselves

Yes, we have full control over the ticks. Currently we require 7 tick marks, and let d3 decide the specific values.

[elasticmachine]

Original comment by @formgeist:

@sqren Can we change it to max. 8 on the x-axis? That's just a magic number I pulled out of my 🎩 but from what I can count that's a decent amount before it breaks on the viewport.

[elasticmachine]

Original comment by @sqren:

@formgeist That should be possible. I actually thought we already limited it to 7, but looking closer at the screenshot you posted I see 12 ticks, so that's clearly not the case.

[elasticmachine]

Original comment by @sqren:

Btw. should it be responsive? So depending on the width:
500px: 7ticks
800px: 12 ticks

or something like it?

[elasticmachine]

Original comment by @formgeist:

Lets leave the responsiveness out of it for now. 8 ticks is good as default for any size viewport IMO.

[sorenlouv]

Fixed in #44870