Nivo: Skip labelling every few ticks on the x-axis

[joergd]

On a line chart - when I have a lot of x values, I don't want to show every tick on the x axis. I couldn't find a way to skip say every 2nd or 3rd one.

axisBottom={{
  "orient": "bottom",
  "tickSize": 0,
  "tickPadding": 5,
  "tickRotation": -45,
  "format": (x, index) => { return x }
}}

I tried the format field - but the function only gets the x value - it would be nice if it also got the index? Is there another way?

[pvjones]

I believe tickCount or tickValues may be what you're looking for? See these examples:

<Bar
  margin={{ top: 10, right: 10, bottom: 60, left: 60 }}
  maxValue={100}
  axisLeft={{ tickValues: [0, 25, 50, 100], format: v => 32 }}
  width={600}
  height={400}
  data={data}
  labelFormat=".2s"
/>
<Bar
  margin={{ top: 10, right: 10, bottom: 60, left: 60 }}
  maxValue={100}
  axisLeft={{ tickCount: 2 }}
  axisBottom={{ tickCount: 1 }}
  width={600}
  height={400}
  data={data}
/>

[joergd]

Hmm no - that's not it - tried it on both the line and bar chart but made no difference ...

[joergd]

Correction: So the tickCount made no difference, but setting an array of tickValues does change the tick labels.

[plouc]

@joergd, is it OK now?

[joergd]

Yes thank you it's fine now. tickCount had no effect, so I had to write my own function to set tickValues instead to an array of values.

[BrunoQuaresma]

tickCount didn't work for me.

[stahlmanDesign]

@joergd @plouc Providing your own tickValues array where you intentionally use empty strings every other index causes a React render warning that two children have the same key (empty string).

Seems Nivo is using the x axis value as a unique key.

This is also a problem when the key happens to be the same, such as a date where you trim the time of day.

[ymenase]

Yes thank you it's fine now. tickCount had no effect, so I had to write my own function to set tickValues instead to an array of values.

hey, i am trying to do this now. Any ideas? I know this is old.