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

[BUG] Chart is not drawn if values are smaller than 0.000001 #5653

Closed
gairom opened this issue Jul 28, 2018 · 5 comments · Fixed by #5723
Closed

[BUG] Chart is not drawn if values are smaller than 0.000001 #5653

gairom opened this issue Jul 28, 2018 · 5 comments · Fixed by #5723

Comments

@gairom
Copy link

gairom commented Jul 28, 2018

Expected Behavior

The chart should be drawn even if values are very small.

Current Behavior

chart is not drawn - axis are drawn but the line(s) doesn't

Steps to Reproduce (for bugs)

create a simple line chart with the following data:
data: [
Math.random()/1000000,
Math.random()/1000000,
Math.random()/1000000,
Math.random()/1000000,
Math.random()/1000000,
Math.random()/1000000,
Math.random()/1000000
],

Environment

  • Chart.js version: 2.7.2
  • Browser name and version: Chrome, latest

change the attached file to .html to see example:
test.txt

@Hedva
Copy link

Hedva commented Jul 30, 2018

Actually they can be smaller, as long as 1 of the values >= 0.000005

They can be even smaller, like 0.00000001.

https://codepen.io/hedva/pen/zLprMN

Maybe with values this small, you can use 10^-5 as the axis label/info. So you could just numbers like 1, 2, 3, 6 in your chart

@gairom
Copy link
Author

gairom commented Jul 30, 2018

Thanks for the reply.
The problem is when I have only small numbers, I can't force values to be bigger than some limit since the data is coming from an external API. The user can select different APIs so the data variance is quit big for the different APIs which make it hard to setup a common style to the chart (values can be around 0.000001 for 1 API and around 1000 for another).

Is there any way to solve this problem?
Where this limit is coming from?
Thanks.

@nfrance709
Copy link

I had the same issue when plotting small numbers and as a work around I just multiplied all incoming data by a large number and then added callbacks to the yAxes and tooltips sections to divide by the same number so the correct value is shown on the axis and in the tooltips popup.

I’ve attached a modified version of your test.txt file with the callbacks added

test1.txt

@costerwi
Copy link
Contributor

costerwi commented Sep 6, 2018

The problem seems to be in the estimation of the precision required to represent ticks:

precision = Math.pow(10, spacing.toString().length - 2);

It uses the string length of the spacing between ticks. Unfortunately, for very small tick spacing the toString() method returns scientific notation which has string length smaller than expected and causes the precision calculation to be so small that all the ticks are 0.

@1024kilobyte
Copy link

1024kilobyte commented Sep 6, 2018

The most versatile solution might be to switch to decimals for the ticks (http://mikemcl.github.io/decimal.js/). A quickfix for the problem could be

var spacingDecimal = new Decimal(spacing);
precision = Math.pow(10, spacingDecimal.toFixed().length - 2);

UPDATE: I can confirm, that the solution above works fine. You just need to install decimal.js:
npm install --save decimal.js
Then you only need to include the package at the top of the file:
var Decimal = require('decimal.js');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants