Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column Chart: No bar shown for (relatively) small negative numbers #8912

Open
DavidMoerman opened this issue Jul 23, 2024 · 3 comments
Open
Labels
type: bug 🐛 [3] Velocity rating (Fibonacci)

Comments

@DavidMoerman
Copy link

DavidMoerman commented Jul 23, 2024

Describe the bug
If a chart's dataset contains large (positive or negative) numbers, and a negative value that is relatively small compared to the other numbers.

To Reproduce
I have altered the column.demo.ts file from the enterprise-ng project, but I am pretty sure the problem is not related to Angular. The first column has a negative value of -1, the second a large value (100000), and the last a value of positive 1.
Both the second and third columns are shown; the first isn't:
image

When checking the values in the Chrome Developer Tools, the third column has a height of 2. I've noticed that this value seems to be the minimum threshold. Increasing the value of the second bar doesn't make the third bar smaller.
The first bar, displaying the negative -1, however, has a height of a tiny fraction and is therefore not visible. I have provided a screenshot of the html elements as well:
image

By the way, in this particular example, the third bar - although shown - is slightly misplaced under the axis line. If the first value is made positive as well, the placement of all bars is above the axis line (as it should be).

Steps to reproduce the behavior:
In the enterprise-ng project, replace the column.demo.ts file with the provided example. The only thing changed is the columnData structure:

  public columnData = [{
    data: [{
      name: 'Automotive',
      shortName: 'Auto',
      abbrName: 'A',
      value: -1,
    }, {
      name: 'Distribution',
      shortName: 'Dist',
      abbrName: 'D',
      value: 100000
    }, {
      name: 'Equipment',
      shortName: 'Equip',
      abbrName: 'E',
      value: 0
    }]
  }];

Expected behavior
Negative values should be represented in the same way as positive values; so if the latter get a minimum height of 2, the negative values should too.

Version
4.97.0

Additional context
It could be related to the problem mentioned in issue #8854.

@tmcconechy tmcconechy added type: bug 🐛 [3] Velocity rating (Fibonacci) labels Jul 23, 2024
@tmcconechy
Copy link
Member

You could try the positive-negative chart as well. I think the issue is in the domain (way it scales between two values). So unsure if its fixable.

Also could try to influence the domain with minValue https://github.com/infor-design/enterprise/blob/main/app/views/components/column/example-domain-change.html#L43

Or number of ticks https://github.com/infor-design/enterprise/blob/main/app/views/components/column/test-axis-y-format-integer.html#L65

Logged to backlog

@DavidMoerman
Copy link
Author

minValue doesn't seem to work with negative values, it is cancelled out in this line:
y.domain([yMin < 0 ? yMin : self.settings.minValue || 0, d3.max(self.settings.isStacked ? maxesStacked : maxes)]).nice();

@tmcconechy
Copy link
Member

@DavidMoerman ok i wasnt sure it would work but was worth a try

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug 🐛 [3] Velocity rating (Fibonacci)
Projects
Status: Groomed
Development

No branches or pull requests

2 participants