Nivo: How I can avoid float numbers on y axis?

Created on 6 Feb 2018  路  4Comments  路  Source: plouc/nivo

Right now I have this chart

image

But I know that I'm never going to have float values, can I only show integers?

Most helpful comment

Had a similar problem where it didn't make sense to show these float intervals:
image

Found a solution to this problem via https://stackoverflow.com/a/12643613
can set format to:

<Line
  axisLeft={{
    format: e => Math.floor(e) === e && e
  }}
/>

Which will result in the tick values of any floats not showing:
image

This should work with a dynamic interval range (not limited by the data itself)

All 4 comments

Yes, you can set the tickValues property to [0, 1] for example.

@plouc is there no other option? What if the y values are in the thousands?

Recently ran into the floats problem while visualising data with a narrow range of values (single-digit; with a wide range of values this shouldn't happen anyway?).

tickValues also takes a number which will then define the number of ticks to display (docs). So if you use the number of unique values on the axis as argument, the floats should be gone:

<Line
  axisLeft={{
    tickValues: data.reduce((set, { y }) => set.add(y), new Set()).size
  }}
/>

Had a similar problem where it didn't make sense to show these float intervals:
image

Found a solution to this problem via https://stackoverflow.com/a/12643613
can set format to:

<Line
  axisLeft={{
    format: e => Math.floor(e) === e && e
  }}
/>

Which will result in the tick values of any floats not showing:
image

This should work with a dynamic interval range (not limited by the data itself)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stahlmanDesign picture stahlmanDesign  路  3Comments

p45mark picture p45mark  路  3Comments

PattieC4ke picture PattieC4ke  路  3Comments

danpettay picture danpettay  路  3Comments

vagnervst picture vagnervst  路  4Comments