How to define a specific interval in time series of a day

[bitgenerator]

Hi,

I've some measurement values collecting over the day and I want to display them with a recharts bar graph between 00:00 - 23:59 for the whole day. I want to have 5 intervals in my chart: 00:00, 06:00, 12:00, 18:00 and 23:59. The sample data:

  const data = {
  events: [
    {
      time: 1674914690,
      magnitude: 10
    },
    {
      time: 1674916697,
      magnitude: 20
    },
    {
      time: 1674918713,
      magnitude: 30
    }
  ],
  startTime: 1674860400,
  endTime: 1674946799
};

The interval is not working or let's say recharts is doing some strange interval based on the data given and the intervals shown are not equal the number I give.

<BarChart
     width={500}
     height={500}
     data={data.events}
     margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
   >
     <CartesianGrid stroke="#f5f5f5" />
     <Bar
       type="monotone"
       dataKey="magnitude"
       stroke="#ff7300"
       dot={false}
       barSize={2}
     />
     <XAxis
       type="number"
       dataKey="time"
       tickCount={5}
       interval={"preserveStartEnd"}
       tickFormatter={(timeStr) => timeFormatter(timeStr)}
       domain={[data.startTime, data.endTime]}
     />
     <YAxis />
   </BarChart>

CodeBox

Is it possible in rechart to show these intervals?

Thanks and Best
Mario

[ckifer]

You can define ticks yourself if you want like this:

const startTimeBeginningOfDay = new Date(data.startTime).setHours(0, 0, 0, 0);
const firstTickDate = new Date(startTimeBeginningOfDay);

const ticks = [
  startTimeBeginningOfDay,
  firstTickDate.setHours(6, 0, 0, 0),
  firstTickDate.setHours(12, 0, 0, 0),
  firstTickDate.setHours(18, 0, 0, 0),
  firstTickDate.setHours(23, 59, 0, 0)
];

https://codesandbox.io/s/even-distribution-ne5d8d-forked-4y0occ?file=/src/App.js