[APM] Charts Y-axis doesn't show maxValue in the ticks

[formgeist]

Kibana version: master

Summary

Extracted from #84178
Blocked by elastic/elastic-charts#397

Most of the dynamic value-driven charts don't show the maxValue meaning that the chart doesn't have an "upper ceiling" shown, making it quite hard to see where those spikes in the charts are landing. I think this in many ways a regression of our existing charts, and I would recommend we take a look at fixing this visualization issue.

Solution

Elastic Charts implemented a nice y-value option in elastic/elastic-charts#1087 as described by @markov00;

Adding the yNice prop to to every series on your chart will allow you to display correctly a final tick on the Y axis.

cc @markov00 @nickofthyme for your consideration

[elasticmachine]

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

[markov00]

@formgeist the mentioned elastic-charts ticket is about providing a niced ending tick, in your example, it basically expands the Y domain to contain the next niced tick on the domain like:

• Transaction duration 80s
• Request per minute: 4.0 rpm
• Error rate 60% or changing the ticks to 0, 25, 50 if the max is less than 50

Your use case instead is to show always the maximum value on the existing series instead, independently if it's is nicely rounded or not.
I can suggest to merge this issue with #84478 and put the AVG and Max stats into a different component: this will benefit the chart readability because all the statistics are now in one single place for quick scan/read.
In the meantime, we can work on the elastic/elastic-charts#397 to add a nicely rounded set of ticks that increase the general readability of the chart.

[sorenlouv]

it basically expands the Y domain to contain the next niced tick on the domain like

The values you suggest (80s, 4.0 rpm, 60%) would be perfect for our use case I think. So extending the Y domain to include the next niced tick would indeed solve our problem.

[formgeist]

@markov00 As @sqren said that's all we need to solve this 👍

I can suggest to merge this issue with #84478 and put the AVG and Max stats into a different component: this will benefit the chart readability because all the statistics are now in one single place for quick scan/read.

Not sure what you mean here. Are you thinking of the average values in the legends that we have displayed?

[markov00]

Hey @formgeist @sqren we have introduced the possibility to add nice rounding to the axis: elastic/elastic-charts#1087
Adding the yNice prop to to every series on your chart will allow you to display correctly a final tick on the Y axis
We are updating the dependency in Kibana #97005, probably merged today. But in the meantime, you can try it using version 28.2.0 of elastic-charts

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[formgeist]

@dannycroft @sqren I've updated the description to have the solution as recommended by the charts team since they've implemented a nice y-value option a few months ago. Maybe we can prioritize this issue and move it into implementation.