recharts missing ticks or ticks are displayed wrong

user_9327171 0
Viewed 1009

I'm using recharts library to create a chart. The x axis of the chart is the timeline axis and I use timestamps as values for it. What I'm trying to do is to display only 5 ticks(for example) spaced equally. I found a lot of people having similar problems on the library git repository. One fixes was to use scale="time" and setting a minimum tick gap for x axis:

<XAxis dataKey='timestamp'
   domain={['dataMin', 'dataMax']}
   type = 'number'
   scale="time"
   minTickGap={120}
   tickCount={7} */
   tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>

I'm using the brush component of the library to zoom in on the chart and the problem with this implementation is that when I zoom in sometimes it displays all the ticks.

Ex. without zoom in: enter image description here

Ex zooming in: enter image description here

I found that if I remove the scale="time" parameter and set a specific tickCount and set interval to 0 the problem that occurs when I zoom in disappears but 1 tick is missing or it appears only when I zoom in.

<XAxis dataKey='timestamp'
   domain={['dataMin', 'dataMax']}
   type = 'number'
   interval={0}
   tickCount={7}
   tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>

enter image description here

Does anyone now how can I fix the issues mentioned above? I don't think I can use predefined ticks based on maximum and minimum values of the axis because those values becomes irrelevant when I zoom in.

recharts reactjs
1 Answers

There is no cure for it as far as I know. You could mention all your tick explicitly in ticks param like ticks={[10,20,50,200,500,1000]} and they will do just fine

Another workaround for me is to set domain as

   domain= {['auto','auto']}

and it shows all the ticks correctly.

user_130299680
Related