<YAxis/> Not Respecting allowDecimals and tickCount Prop when domain is set to non-int values

Do you want to request a feature or report a bug?

bug

What is the current behavior?

<YAxis domain={['dataMin-0.5','dataMax+0.5']} tickCount={10} allowDecimals={false}/> Produces the following:

There are neither 10 ticks nor decimal-less tick values.

I managed to get somewhat correct behavior with: <YAxis domain={[170,187]} tickCount={10} allowDecimals={false}/>

As you can see, there are now decimal-less tick values but there are only 9 ticks, which is better than 8 from before but still not the 10 that we want.

Interestingly enough setting domain={[170.2,187.2]} breaks the allowDecimals prop again.

I managed to get correct behavior by completely taking out domain as a prop: <YAxis tickCount={10} allowDecimals={false}/>

However, my graph now looks ugly.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/9y45ut13/).

Run the above code. Also I would use the jsfiddle but is anyone aware that the template doesn’t render? Might be another issue to submit but maybe I’m missing how to use it?

What is the expected behavior?

<YAxis/> should respect those props even if domain is set.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

1.0.0-alpha.2/Chrome and Safari. Unsure.

[xile611]

@swiftfoot When you specify a strict domain of YAxis, the count of ticks can not be guaranteed. Because we think the readability of tick has higher priority.

[Amthieu]

@al3x-huang It is indeed supported, my mistake, I thought it was a local variable you had defined. It is even in the API documentation as mentioned above.

So, it is true that having a minimum value that is a decimal number would result in having decimal numbers as your ticks. Here is a temporary workaround :

const values = data.map(obj => { return obj.pv; });
const min = Math.min(...values);
const max = Math.max(...values);

const domain = [Math.floor(min / 100) * 100 - 100, Math.ceil(max / 100) * 100 + 100];

Sorry for the misunderstanding.