Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Recharts graph has uneven intervals due to data point count

I have the following problem: I have an array of data, and I am rendering a graph based on it. The number of data points in each interval can vary, resulting in different widths for the intervals (example in the screenshot). How can I fix this to ensure that the intervals have equal widths? I am using React and the Recharts library.

Chart showing intervals

Close-up of chart, showing intervals are uneven

Thank you in advance for your help!

I tried to find the necessary props in the recharts library to solve the problem, but without success

Tags:

2

Answers


  1. 0

    It doesn’t makes sense to have equal width of the intervals especially when your data points are unevenly placed. Use evenly spaced data points for this graph to have consistent width.

    Login or Signup to reply.
  2. 0

    Recharts maintainer here, this is number interpolation. The distance between one time is different than the distance between another, hence why the distances are not even.

    Your axis is time which means it is a number. You can change your XAxis to type="category" and it will be treated as a categorical domain. Your ticks will be evenly placed, but you will lose a few characteristics that make a number or time domain what they are.

    Your data will need to be sorted by time ascending in order for things to make sense and number interpolation will no longer work (i.e. I can’t append 09:40 to my data and have it appear before tick 09:48)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search