Scale to Data Bounds margin applied only to lower bound

[dpotter-intoto]

Kibana version: 7.3.1

Elasticsearch version: 7.3.1

Server OS version: CentOS Linux release 7.6.1810 (Core)

Browser version: 76.0.3809.100 (Official Build) (64-bit)

Browser OS version: Microsoft Windows [Version 10.0.17134.950]

Original install method (e.g. download page, yum, from source, etc.): yum

Describe the bug: When creating a Line Visualization, setting the Y-Axis Custom Extents option Scale to Data Bounds and a Bounds Margin applies the margin to the lower bound, but not to the upper bound.

For example, in the attached screenshot, the Bounds Margin is set to 5, indicating that the extents of the Y-Axis should be (max(metric)+5) and the lower axis should be (min(metric)-5). As you can see, the lower bound is correctly set, but the upper bound has not had the margin added.

Steps to reproduce:

1. Create new visualization of type line
2. (I chose an elasticsearch source)
3. Add a metric. (I chose an average of a float value)
4. Add an X-Axis bucket of Date Histogram
5. Enable the Y-Axis option "Scale to Data Bounds" and set the Bounds Margin to a positive value (I used 5).
6. Apply Changes
7. Observe that the upper extent of the Y-Axis is the max value of the metric

Expected behavior:
In step 7 above, the upper extent of the Y-Axis should be (max value of metric + margin)

Screenshots (if relevant):

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

[dpotter-intoto]

Although I've never hacked on Kibana source before, I believe this bug is in src/legacy/ui/public/vislib/lib/axis/axis_scale.js where there are unnecessary conditions testing whether max<0 and min>0.

    const domain = [min, max];
    if (this.axisConfig.isUserDefined()) return this.validateUserExtents(domain);
    if (this.axisConfig.isLogScale()) return this.logDomain(min, max);
    if (this.axisConfig.isYExtents()) {
      const scaleBoundsMargin = this.axisConfig.get('scale.boundsMargin');

      if (scaleBoundsMargin === 0) {
        return domain;
      } else {
        if (max < 0) {
          domain[1] = domain[1] + scaleBoundsMargin;
        }
        if (min > 0) {
          domain[0] = domain[0] - scaleBoundsMargin;
        }
        return domain;
      }

[elasticmachine]

Pinging @elastic/kibana-app

[thekofimensah]

I'm also seeing this problem, please fix! 7.5.1

[thekofimensah]

This is still a problem in version 7.8

[obi134]

Still an issue with 7.10, please fix

[thekofimensah]

This would be great to fix because I can't use the data bounds feature with this problem, it hides the data on the borders!

[nickofthyme]

This is fixed as of v7.12.0 via #78154 using the new chart library.

Screen.Recording.2021-04-05.at.04.22.08.PM.mp4

One caveat is that the margin will be applied to the min and max of the data domain but will be contained to 0. Meaning if you had a margin of 10 and your data goes from 5 to 20 the domain would be 0 to 30 not -5 to 30. This is only when the data is all positive or all negative. See the recording above for a demo of this.