Issues with Y Axis Values & Decimal Values Using Bar Chart

[MattyK14]

There's an issue with the scale return for the Y axis values when using decimal numbers.

When the scale is from 0-0.5, 0.3 on Y axis is rendered as 0.30000000000000004

When the scale is from 0-1, 0.6 is rendered as 0.6000000000000001 on the Y axis.

[marzolfb]

FYI - I've tracked this done to the usage of lodash's range method with floating point values in Axis.js. The difficulties we are dealing with here are documented in this issue from Oct 2015 in the lodash repo. Thinking about possible ways to deal with this. Open to ideas. Plenty of ideas here. My immediate reaction is to work with integers for the range values (and then convert back).

[marzolfb]

Ok, I'm looking for some design feedback before starting a PR on this one. I generally think the "Method 3" technique offered here is usable to solve the issue.

The only question in my mind is how do you determine what a suitable default for the number of decimal places to target (and therefore shift to the left of the decimal point to round before converting back to the target number of decimal places)?

Here's a jsfiddle to illustrate the issue - how does one specify the decimalPlaces parameter to pass to the fixFloats function in all of the example ranges? I assume we add another chart option for both the x and y axis for a target decimalPlaces that would take effect when you have floating point values in your data set but then what would be a suitable default for decimalPlaces if the chart creator didn't specify that configuration option (which maintains backward compatibility)? I see several possible options:

• Set it to a static number of places (like 2)?
• Use the number of decimal places on the first element of the data set?
• Try to dynamically determine a suitable default by evaluating the number of decimal places in use in the data set? How?
  • Use the number of decimal places that are used by a majority of numbers?
  • Use the max number decimal places found smaller then some threshold like 10 decimal places?

A lot of this feels like a big hack and all of these approaches are problematic in various regards so I'm trying to pick the one that "sucks the least". Any thoughts? Any approaches I haven't considered here that are better?

[Cody-G-G]

The decimalPlaces parameter sounds nice, and I think the default for it is fine as a static number, 2 making the most sense since for graphs to be displayed on mobile devices the required precision would very rarely exceed that. However, I believe it should take effect not only when you have floating point values in your data set, but all the time. This is because it doesn't really have much to do with what the number of decimal places are for the elements in the dataset, since my dataset could be something like (1, 50), (2, 85), and so even though my X axis datapoints don't have any decimal places, there will be numbers with decimal places in between them that will be displayed along the axis after those are calculated.

[katscott]

What about a format function that can be overridden? Use a default with perhaps 2 decimal places, but otherwise allow a user to format however they like (such as with currency symbols). That would be the most robust.

[marzolfb]

The "format function" already exists here and is embodied in the labelFunction option (in the example app, the StockLineChartDynamicTickLabels example illustrates the use of this option).

While its true each user of this library could address the floating point problem in this issue by implementing their own rounding routine in that labelFunction function, I think this is a more universal problem that occurs often enough that we would want to address it for everyone.